Проблема с показом содержимого с помощью jQuery .show()

У меня есть обработчик щелчка на верхнем уровне <li> s, который я хочу скрыть все содержимое ниже <li> s, а затем отобразить содержимое под конкретным <li>, которое было нажато.Проблема с показом содержимого с помощью jQuery .show()

Скрытые работы, но показ нет.

$('.menu li').click(function() { 
 
    $('.submenu').hide(); 
 
    var myclass = $('submenu'); 
 
    $(this).show($submenu) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <button>Menu</button> 
 
    <ul class="menu"> 
 
    <li><a href="#">Football</a> 
 
    </li> 
 
    <li><a href="#">cricket</a> 
 
     <ul class="submenu"> 
 
     <li><a href="#">Shane</a> 
 
     </li> 
 
     <li><a href="#">Waqar</a> 
 
     </li> 
 
     <li><a href="#">Waseem</a> 
 
     </li> 
 
     <li><a href="#">Akhtar</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Hockey</a> 
 
    </li> 
 
    <li><a href="#">Baseball</a> 
 
     <ul class="submenu"> 
 
     <li><a href="#">Shane</a> 
 
     </li> 
 
     <li><a href="#">Waqar</a> 
 
     </li> 
 
     <li><a href="#">Waseem</a> 
 
     </li> 
 
     <li><a href="#">Akhtar</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <div class="clear"></div> 
 
    </ul> 
 
</div>

источник

2016-01-20 Hafiz

что следует ожидать ваш вывод? –

Контекст проблемы необходим, чтобы дать вам решение. Пожалуйста, пример того, чего вы пытаетесь достичь. – Dandy

Объяснил, что делает код, и что он делает. Кроме того, сделайте код тестовым фрагментом (с помощью окна [<>] в меню редактирования). –

Попробуйте это.

Он скрывает подменю с CSS.
Затем он переключает подменю, когда вы нажимаете элемент списка.

Если вы хотите, чтобы одно подменю отображалось сразу, раскомментируйте строку в js.

$('.menu li').has('.submenu').click(function(e) { 
 
    e.preventDefault(); 
 
    $(this).find('.submenu').slideToggle(); 
 
});

.submenu { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <button>Menu</button> 
 
    <ul class="menu"> 
 
    <li><a href="#">Football</a></li> 
 
    <li><a href="#">cricket</a> 
 
     <ul class="submenu"> 
 
     <li><a href="#">Shane</a></li> 
 
     <li><a href="#">Waqar</a></li> 
 
     <li><a href="#">Waseem</a></li> 
 
     <li><a href="#">Akhtar</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Hockey</a></li> 
 
    <li><a href="#">Baseball</a> 
 
     <ul class="submenu"> 
 
     <li><a href="#">Shane</a></li> 
 
     <li><a href="#">Waqar</a></li> 
 
     <li><a href="#">Waseem</a></li> 
 
     <li><a href="#">Akhtar</a></li> 
 
     </ul> 
 
    </li> 
 
    <div class="clear"></div> 
 
    </ul> 
 
</div>

источник

2016-01-20 07:44:05 LinkinTED

Вы должны попробовать это.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
     <button>Menu</button> 
 
     <ul class="menu"> 
 
     <li><a href="#">Football</a></li> 
 
     <li><a href="#">cricket</a> 
 
      <ul class="submenu"> 
 
      <li><a href="#">Shane</a></li> 
 
      <li><a href="#">Waqar</a></li> 
 
      <li><a href="#">Waseem</a></li> 
 
      <li><a href="#">Akhtar</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Hockey</a></li> 
 
     <li><a href="#">Baseball</a> 
 
      <ul class="submenu"> 
 
      <li><a href="#">Shane</a></li> 
 
      <li><a href="#">Waqar</a></li> 
 
      <li><a href="#">Waseem</a></li> 
 
      <li><a href="#">Akhtar</a></li> 
 
      </ul> 
 
     </li> 
 
     <div class="clear"></div> 
 
     </ul> 
 
    </div> 
 
    <script type="text/javascript"> 
 
     $('.submenu').hide(); 
 
     $(document).on("click",".menu li",function(){ 
 
      $(this).find('.submenu').slideToggle(); 
 
     }); 
 
     
 
    </script>

источник

2016-01-20 07:46:24

спасибо вам большое, ребята, я получил свое решение проблемы с помощью вас, ребята – Hafiz

@Hafiz добро пожаловать. принимать ответ и делать кредиты, если он вам поможет. –

Вы используете JQuery и есть toggle() функция для показа/скрытия переключателя и использовать как этот

$('.submenu').toggle();

и я установил скрипт, который не работает.

$('.menu li').click(function(){ 
    $('.submenu').hide(); 
    $(this).find('.submenu').show(); 
});

Working fiddle

источник

2016-01-20 07:54:18 Mystika

Проблема с показом содержимого с помощью jQuery .show()

ответ

Смежные вопросы