如何在點擊父div jquery時顯示下一個div

Question

我試圖在我的頁面上產生一些影響。點擊主要div我要顯示隱藏內部div.But它不適合我

HTML

 <div class="cmn"><div><span></span></div>Here
        <div class="toShow" style="display: none;">
                <div class="toshowinnr clr">
                    <a class="sclnk" href="#"></a>
                    <a class="sclnk" href="#"></a>
                    <a class="sclnk" href="#"></a>
                    <a class="sclnk" href="#"></a>
                    <a class="sclnk" href="#"></a>
                </div>
            </div>
    </div>
<div class="cmn"><div><span></span></div>Here
        <div class="toShow" style="display: none;">
                <div class="toshowinnr clr">
                    <a class="sclnk" href="#"></a>
                    <a class="sclnk" href="#"></a>
                    <a class="sclnk" href="#"></a>
                    <a class="sclnk" href="#"></a>
                    <a class="sclnk" href="#"></a>
                </div>
            </div>
    </div>
<div class="cmn"><div><span></span></div>Here
        <div class="toShow" style="display: none;">
                <div class="toshowinnr clr">
                    <a class="sclnk" href="#"></a>
                    <a class="sclnk" href="#"></a>
                    <a class="sclnk" href="#"></a>
                    <a class="sclnk" href="#"></a>
                    <a class="sclnk" href="#"></a>
                </div>
            </div>
    </div>

在cmn toShow div我想顯示/隱藏toShow div 。我已經這樣做但這對我不起作用。

jQuery('div.cmn').click(function(){
        jQuery(this).closest('div.toShow').stop().slideDown();
    }).mouseleave(function(){
        jQuery(this).closest('div.toShow').stop().slideUp();
    });

Answer 1

你需要使用.find（），因為你正在尋找一個后代

 jQuery('div.cmn').click(function() { jQuery(this).find('div.toShow').stop().slideDown(); }).mouseleave(function() { jQuery(this).find('div.toShow').stop().slideUp(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="cmn"><div><span></span></div>Here <div class="toShow" style="display: none;"> <div class="toshowinnr clr"> <a class="sclnk" href="#">1</a> <a class="sclnk" href="#">2</a> <a class="sclnk" href="#">3</a> <a class="sclnk" href="#">4</a> <a class="sclnk" href="#">5</a> </div> </div> </div> <div class="cmn"><div><span></span></div>Here <div class="toShow" style="display: none;"> <div class="toshowinnr clr"> <a class="sclnk" href="#">1</a> <a class="sclnk" href="#">2</a> <a class="sclnk" href="#">3</a> <a class="sclnk" href="#">4</a> <a class="sclnk" href="#">5</a> </div> </div> </div> <div class="cmn"><div><span></span></div>Here <div class="toShow" style="display: none;"> <div class="toshowinnr clr"> <a class="sclnk" href="#">1</a> <a class="sclnk" href="#">2</a> <a class="sclnk" href="#">3</a> <a class="sclnk" href="#">4</a> <a class="sclnk" href="#">5</a> </div> </div> </div> 

Answer 2

試試這個

<div class="cmn"><div><span></span></div>Here
<div class="toShow" style="display: none;">
        <div class="toshowinnr clr">
            <a class="sclnk" href="#">1</a>
            <a class="sclnk" href="#">2</a>
            <a class="sclnk" href="#">3</a>
            <a class="sclnk" href="#">4</a>
            <a class="sclnk" href="#">5</a>
        </div>
    </div>
</div>
<div class="cmn"><div><span></span></div>Here
<div class="toShow" style="display: none;">
        <div class="toshowinnr clr">
            <a class="sclnk" href="#">6</a>
            <a class="sclnk" href="#">7</a>
            <a class="sclnk" href="#">8</a>
            <a class="sclnk" href="#">9</a>
            <a class="sclnk" href="#">10</a>
        </div>
    </div>

jQuery的

這將始終為您提供第一個div.toShow

jQuery('div.cmn').click(function() {
  jQuery(this).children('div.toShow').first().stop().slideDown();
}).mouseleave(function() {
  jQuery(this).children('div.toShow').first().stop().slideUp();
});

小提琴： 演示

Answer 3

我認為這段代碼對你有用。

  jQuery('div.cmn').click(function(event,ui){
        jQuery(ui).find('div.toShow').stop().slideDown();
    }).mouseleave(function(event,ui){
        jQuery(this).find('div.toShow').stop().slideUp();
    });

Answer 4

您需要將display：block css屬性設置為inner div。 看一看：

$(".cmn").on("click",function(){
  $(this).find(".toShow").toggleClass("hideshow");
});

css代碼

.hideshow
{
  display:block;
}

.toggleClass將檢查div.toShow上是否存在“hideshow”類，否則它將添加類“hideshow”，否則它將刪除“.hideshow”類，該類將在父div上執行hide / show。

Answer 5

你可以嘗試這樣的事情。

 $(document).ready(function() { $(".here_button").click(function() { $($(this).parents(".cmn").find(".toShow")[0]).css("display","block"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <div class="cmn"> <div><span></span> </div><span class="here_button">Here</span> <div class="toShow" style="display: none;"> <div class="toshowinnr clr"> <a class="sclnk" href="#">Some Text</a> <a class="sclnk" href="#">Some Text</a> <a class="sclnk" href="#">Some Text</a> <a class="sclnk" href="#">Some Text</a> <a class="sclnk" href="#">Some Text</a> </div> </div> </div> <div class="cmn"> <div><span></span> </div><span class="here_button">Here</span> <div class="toShow" style="display: none;"> <div class="toshowinnr clr"> <a class="sclnk" href="#">Some Text</a> <a class="sclnk" href="#">Some Text</a> <a class="sclnk" href="#">Some Text</a> <a class="sclnk" href="#">Some Text</a> <a class="sclnk" href="#">Some Text</a> </div> </div> </div> <div class="cmn"> <div><span></span> </div><span class="here_button">Here</span> <div class="toShow" style="display: none;"> <div class="toshowinnr clr"> <a class="sclnk" href="#">Some Text</a> <a class="sclnk" href="#">Some Text</a> <a class="sclnk" href="#">Some Text</a> <a class="sclnk" href="#">Some Text</a> <a class="sclnk" href="#">Some Text</a> </div> </div> </div>