make invisible the <li> when inside has no <ul>

Asked

Viewed 502 times

-1

I have an HTML that mounts DROPDOWN menu.

With JQUERY, I’m trying to make invisible items that don’t have sublists inside.

I tried using the following command, but it didn’t work

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

The 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>
jquery

  • what I did wrong to get a negative point in the question?

  • It would not be better to generate without items than to hide them afterwards?

  • Yes, it would be, but I have to change some structures in the database, because the menus are automatically generated through information from it. Jquery would be a palliative solution.

  • I wouldn’t know how to answer by the person who said no, but you deleted the previous question, which was pretty much the same and had an answer.

2 answers

2


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

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

But I still think the ideal would be to review 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>
    <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>

  • I used this solution. Attended. Thank you.

  • @If Pedro moves the set, remember to change the body by the external element ( can be div, it depends on your original code)

  • had already removed the body and put the top ul#menu_in place... Thanks.

1

You can do it like 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>
    <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>

In this example I used the body, you must use the direct relative or give a class to the first ul to avoid confusion with the ul li interns.

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.