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。我已经这样做但这对我不起作用。

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

试试这个

((c-mode . ((eval . (let ((clang-args '("-isystem/usr/include/glib-2.0"
                                        "-isystem/usr/lib/glib-2.0/include")))
                      (setq-local company-clang-arguments clang-args
                                  flycheck-clang-args clang-args))))))

jQuery的

这将始终为您提供第一个<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>

div.toShow

小提琴： Demo

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将检查＆＃34; hideshow＆＃34; class存在于div.toShow上，如果不存在则会添加class＆＃34; hideshow＆＃34;否则它将删除＆＃34; .hideshow＆＃34;将在父div的点击上执行隐藏/显示的类。

Answer 5

你可以尝试这样的事情。

＆＃13;

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

＆＃13;

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

＆＃13;

如何在点击父div jquery时显示下一个div

5 个答案: