leave it invisible when inside does not have ul

Navigation
-1

I have an HTML that mounts DROPDOWN menu.

With JQUERY, I'm trying to make invisible items that have no sublists inside them.

I tried using the following command, but it did not work

$('ul li :not(ul)').hide() ;

HTML code: 

<ul>
<li>
    <a href="javascript:void(0)">Opção 1</a>
</li>
<li><a href="javascript:void(0)">Opção2</a>
    <ul>
        <li><a href="opcao_3.htm">Opção 3</a></li>
        <li><a href="opcao_4.htm">Opção 4</a></li>
    </ul>
</li>
<li>
    <a href="javascript:void(0)">Opção 5</a>
</li>
 <li><a href="javascript:void(0)">Opção6</a>
     <ul>
        <li><a href="opcao_3.htm">Opção 7</a></li>
   </ul>
</li>
</ul>
    
asked by anonymous 02.12.2014 / 18:48

2 answers

2

Since you have commented that the solution is palliative, you could hide all and show the ones that interest (XGH method): 

$('body > ul > li').hide();
$('body > ul > li ul').parent().show();

But I still think the ideal would be to revise the dynamic generation part instead.

Example: 

$('body > ul > li').hide();
$('body > ul > li ul').parent().show();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><ul><li><ahref="javascript:void(0)">Opção 1</a>
  </li>
  <li><a href="javascript:void(0)">Opção2</a>
    <ul>
      <li><a href="opcao_3.htm">Opção 3</a></li>
      <li><a href="opcao_4.htm">Opção 4</a></li>
    </ul>
  </li>
  <li>
    <a href="javascript:void(0)">Opção 5</a>
  </li>
  <li><a href="javascript:void(0)">Opção6</a>
    <ul>
      <li><a href="opcao_3.htm">Opção 7</a></li>
    </ul>
  </li>
</ul>
    
02.12.2014 / 18:58
1

You can do this: $("body > ul > li:not(:has(ul))").hide();

Or so: 

$('body>ul>li').filter(function(){
  return !$(this).find('ul').length;
}).hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><ul><li><ahref="javascript:void(0)">Opção 1</a>
</li>
<li><a href="javascript:void(0)">Opção2</a>
    <ul>
        <li><a href="opcao_3.htm">Opção 3</a></li>
        <li><a href="opcao_4.htm">Opção 4</a></li>
    </ul>
</li>
<li>
    <a href="javascript:void(0)">Opção 5</a>
</li>
 <li><a href="javascript:void(0)">Opção6</a>
     <ul>
        <li><a href="opcao_3.htm">Opção 7</a></li>
   </ul>
</li>
</ul>

In this example I used body , you must use the direct parent, or give a class to the first ul to avoid confusion with the% internal%.

    
02.12.2014 / 18:53
Name of the variable passed in the function argument Problem with accents and port on localhost