title: jQuery if next hidden element width class has no children do something
body: <p>I have this HTML structure:</p>
  
  <pre><code>&lt;ul&gt;
  
      &lt;li class="cat-item"&gt;
          &lt;a href="link.html"&gt;Link&lt;/a&gt;
      &lt;/li&gt;
  
      &lt;li class="subcat-item" style="display: none"&gt;
          &lt;ul class="subcat-list"&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  
      &lt;li class="cat-item"&gt;
          &lt;a href="link2.html"&gt;Link2&lt;/a&gt;
      &lt;/li&gt;
  
      &lt;li class="subcat-item" style="display: none"&gt;
          &lt;ul class="subcat-list"&gt;
  
              &lt;li class="subcat-list-item"&gt;&lt;a href="link3.html"&gt;Link 3&lt;/a&gt;&lt;/li&gt;
              &lt;li class="subcat-list-item"&gt;&lt;a href="link4.html"&gt;Link 4&lt;/a&gt;&lt;/li&gt;
              &lt;li class="subcat-list-item"&gt;&lt;a href="link5.html"&gt;Link 5&lt;/a&gt;&lt;/li&gt;
  
          &lt;/ul&gt;
      &lt;/li&gt;
  
  
  
  &lt;/ul&gt;
  </code></pre>
  
  <p>Now what I want to do:</p>
  
  <p>if ( next element after li.cat-item with class .subcat-item has child ul.subcat-list and this ul.subcat-list has children ) when you click on this .cat-item, li.subcat-item slideToggles and returns false (page not reload)</p>
  
  <p>else when you click on this .cat-item there goes function: window.location = this.href;</p>
  
  <p>So simply: If category has subcategory slideToggle the list with subcategory links. 
  If category has no subcategories go to category link.</p>
  
  <p>Any help with that?</p>
  
  <p>// EDIT</p>
  
  <p>Thanks for your answers. There goes another step that I can't handle. Here is HTML:</p>
  
  <pre><code> &lt;ul&gt;
  
       &lt;li class="cat-item"&gt;
  
           &lt;a href="link.html"&gt;Link&lt;/a&gt;
  
       &lt;/li&gt; &lt;!-- cat-item --&gt;
  
       &lt;li class="subcat-item" style="display: none;"&gt;
  
           &lt;ul class="subcat-list"&gt;        
  
           &lt;/ul&gt; &lt;!-- subcat-list --&gt;
  
       &lt;/li&gt; &lt;!-- subcat-item --&gt;
  
       &lt;li class="cat-item"&gt;
  
           &lt;a href="link.html"&gt;Link&lt;/a&gt;
  
       &lt;/li&gt; &lt;!-- cat-item --&gt;    
  
       &lt;li class="subcat-item" style="display: none;"&gt;
  
          &lt;ul class="subcat-list"&gt;
  
              &lt;li class="subcat-list-item"&gt;
  
                  &lt;a href="link.html"&gt;Link&lt;/a&gt;
  
              &lt;/li&gt; &lt;!-- subcat-list-item --&gt;
  
              &lt;li class="sub-subcat-item" style="display: none;"&gt;
  
                  &lt;ul class="sub-subcat-list"&gt;
  
                  &lt;/ul&gt; &lt;!-- sub-subcat-list --&gt;
  
              &lt;/li&gt; &lt;!-- sub-subcat-item --&gt;
  
              &lt;li class="subcat-list-item"&gt;
  
                  &lt;a href="link.html"&gt;Link&lt;/a&gt;
  
              &lt;/li&gt; &lt;!-- subcat-list-item --&gt;
  
              &lt;li class="sub-subcat-item" style="display: none;"&gt;
  
                  &lt;ul class="sub-subcat-list"&gt;
  
                      &lt;li class="sub-subcat-list-item"&gt;
  
                          &lt;a href="link.html"&gt;Link&lt;/a&gt;
  
                      &lt;/li&gt; &lt;!-- sub-subcat-list-item --&gt;
  
                      &lt;li class="sub-subcat-list-item"&gt;
  
                          &lt;a href="link.html"&gt;Link&lt;/a&gt;
  
                      &lt;/li&gt; &lt;!-- sub-subcat-list-item --&gt;
  
                  &lt;/ul&gt; &lt;!-- sub-subcat-list --&gt;
  
              &lt;/li&gt; &lt;!-- sub-subcat-item --&gt;
  
          &lt;/ul&gt; &lt;!-- subcat-list --&gt;
  
       &lt;/li&gt; &lt;!-- subcat-item --&gt;   
  
   &lt;/ul&gt;
  </code></pre>
  
  <p>So now: when user clicks on .subcat-list-item and next element with class .sub-subcat-item has no children (ul without li), he should go to .subcat-list-item url. Else .sub-subcat-item should slideToggle.</p>