Скрыть и показать родителям и детской меню

Question

Я пытаюсь создать меню. Когда кто-то нажимает на родителя li (showul), я хочу, чтобы slidedown child li (hideul). и снова, когда кто-то нажимает на другого родителя li, он должен открыть соответствующий дочерний li, а также скрыть все ранее открытые li. проверьте мой jsfiddle для лучшего понимания. Незлая помощь. Я изучаю jquery.

<ul> 
    <li><a href="#" id="update" class="showul">Update Pages</a> 
    <ul class="hideul"> 
     <li>About Us</li> 
     <li>Contact Us</li> 
    </ul> 
    </li> 
    <li><a href="#" id="category" class="showul">Category Option</a> 
    <ul class="hideul"> 
     <li>Add Category</li> 
     <li>Category List</li> 
    </ul> 
    </li> 
    <li><a href="#" id="postoption" class="showul">Post Option</a> 
    <ul class="hideul"> 
    <li>Add Post</li> 
    <li>Post List</li> 
    </ul> 
    </li> 
</ul> 


$(document).ready(function() { 
    $(".showul").click(function(){ 
     $(".hideul").slideToggle("slow"); 
    }); 
}); 

Answer 1

Во-первых, вам нужно использовать siblings() найти ul, связанные с текущей a. Затем, чтобы скрыть все остальные ul в то время как переключая текущий, вы можете использовать это:

$(".showul").click(function() { 
    var $hideUl = $(this).siblings(".hideul"); 
    var show = !$hideUl.is(':visible'); 
    $('.hideul').slideUp('slow'); 
    if (show) 
     $hideUl.slideToggle('slow'); 
}); 

Update fiddle

Answer 2

$(document).ready(function() { 
 
    $(".showul").click(function(){ 
 
    $(this).parent().find(".hideul").slideToggle("slow"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><a href="#" id="update" class="showul">Update Pages</a> 
 
    <ul class="hideul"> 
 
     <li>About Us</li> 
 
     <li>Contact Us</li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#" id="category" class="showul">Category Option</a> 
 
    <ul class="hideul"> 
 
     <li>Add Category</li> 
 
     <li>Category List</li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#" id="postoption" class="showul">Post Option</a> 
 
    <ul class="hideul"> 
 
    <li>Add Post</li> 
 
    <li>Post List</li> 
 
    </ul> 
 
    </li> 
 
</ul>

$(document).ready(function() { 
 
    $(".showul").click(function(){ 
 
    $(this).siblings(".hideul").slideToggle("slow"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><a href="#" id="update" class="showul">Update Pages</a> 
 
    <ul class="hideul"> 
 
     <li>About Us</li> 
 
     <li>Contact Us</li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#" id="category" class="showul">Category Option</a> 
 
    <ul class="hideul"> 
 
     <li>Add Category</li> 
 
     <li>Category List</li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#" id="postoption" class="showul">Post Option</a> 
 
    <ul class="hideul"> 
 
    <li>Add Post</li> 
 
    <li>Post List</li> 
 
    </ul> 
 
    </li> 
 
</ul>

1. Чтобы найти ул вам нужно идти к родителю якоря затем найти ул
2. Вы можете также использовать .siblings()

Answer 3

$(document).ready(function() { 
 
    $(".showul").click(function(){ 
 
    $(this).next(".hideul").slideToggle("slow"); // get the next element of anchor tag and toggle it 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 

 
<ul> 
 
    <li><a href="#" id="title">Title & Slogan</a></li> 
 
    <li><a href="#" id="social">Social Media</a></li> 
 
    <li><a href="#" id="copyright">Copyright</a></li> 
 
    <li><a href="#" id="update" class="showul">Update Pages</a> 
 
     <ul class="hideul"> 
 
     <li>About Us</li> 
 
     <li>Contact Us</li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#" id="category" class="showul">Category Option</a> 
 
     <ul class="hideul"> 
 
     <li>Add Category</li> 
 
     <li>Category List</li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#" id="postoption" class="showul">Post Option</a> 
 
    <ul class="hideul"> 
 
     <li>Add Post</li> 
 
     <li>Post List</li> 
 
    </ul> 
 
    </li> 
 
</ul>

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

$(document).ready(function() { 
    $(".showul").click(function(){ 
    console.log("here") 
    $(this).next(".hideul").slideToggle("slow"); 
    }); 
}); 

Answer 4

Вы должны использовать комбинацию slideUp() - чтобы скрыть другие и slideToggle() - для переключения состояния тока элементы.

Также используйте селектор :visible для дальнейшего уменьшения результатов запроса.

$(".showul").click(function(){ 
    var $currEl = $(this).next('.hideul'); 
    $(".hideul:visible").not($currEl).slideUp("slow"); 
    $currEl.slideToggle("slow"); 
}); 

Updated Fiddle

Answer 5

Есть два шага вы должны пройти.

1. Скрытие все ранее открытые блоки
2. Показаны разыскиваемого блок

$(document).ready(function() { 
 
    $(".showul").click(function(){ 
 
    $(".hideul").slideUp("slow"); 
 
    $(this).parent().find(".hideul").slideToggle("slow"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><a href="#" id="update" class="showul">Update Pages</a> 
 
    <ul class="hideul"> 
 
     <li>About Us</li> 
 
     <li>Contact Us</li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#" id="category" class="showul">Category Option</a> 
 
    <ul class="hideul"> 
 
     <li>Add Category</li> 
 
     <li>Category List</li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#" id="postoption" class="showul">Post Option</a> 
 
    <ul class="hideul"> 
 
    <li>Add Post</li> 
 
    <li>Post List</li> 
 
    </ul> 
 
    </li> 
 
</ul>