如何在第二次点击时关闭 div？

Question

例如，当您单击 'financial roadshows' 时，它会打开。但是当我再次点击时，它会暂时关闭然后再次打开。我试图寻找答案，但在谈到这个问题时我只是一个巨大的菜鸟。我希望有人能帮助我！

这是我使用的代码：

$(document).ready(function(){
    $(".desc_div").slideUp();
    $(".open_div").click(function(){    
        wrapper = $('#services_blocks'),
        link = $(this);

        $('.open_div.selected').next(".desc_div").slideUp('slow', function() {
            $(this).prev().removeClass('selected');
        }); 

        link.addClass("selected").next(".desc_div").slideDown("slow");

    });
});

这是我的 JSfiddle：

http://jsfiddle.net/59f29b1L/

Answer 1

更新了你弟弟的剧本。我只对向上滑动脚本添加了一些更改。希望这会有所帮助。

$(document).ready(function(){
$(".desc_div").slideUp();

$(".open_div").click(function(){

    wrapper = $('#services_blocks'),
    link = $(this);

    $('.open_div.selected').next(".desc_div").slideUp('slow', function() {
        $(this).prev().removeClass('selected');

    }); 
    if($(this).next(".desc_div").css('display')=='none'){
    link.addClass("selected").next(".desc_div").slideDown("slow");
    }

});
});

DEMO FIDDLE

Answer 2

使用 jQuery 的 slideToggle 可以更轻松地完成此操作。

http://api.jquery.com/slidetoggle/

$(".open_div").click(function(){
    $(this).next(".desc_div").stop().slideToggle( "slow" );
});

试试看：http://jsfiddle.net/59f29b1L/6/

要仅触发一次点击事件，请查看 this answer。

Answer 3

FIDDLE:

$('.open_div').click(function(){
   $('.desc_div').toggle().toggleClass('selected');    
});

Answer 4

我在这里更改了你的fiddle：http://jsfiddle.net/59f29b1L/8/

首先，你必须改变html。让所有 open_divs 环绕您的 desc_div.

然后使用此代码：

$(document).ready(function () {
    $(".desc_div").hide(); // this is used to initally hide all desc_div

    $(".open_div").click(function () { // define the click function

        $(".desc_div", this).stop().slideToggle("slow"); //slide up/down depending on current state
    });
});

你可以换行

 $(".desc_div").hide();

到

 $(".desc_div:gt(0)").hide();

Answer 5

Fiddle : jsfiddle

下拉菜单在这里有效，希望对您有所帮助。

更改：

    $('.open_div.selected').next(".desc_div.down").slideUp('slow', function() {
        $(this).prev().removeClass('selected');
        $(this).removeClass('down').addClass('up');


    }); 
    link.addClass("selected").next(".desc_div.up").slideDown("slow", function() {
        $(this).removeClass('up').addClass('down');


    });

并且还在 html

中添加了一个 class

 <div class="desc_div up">

Answer 6

<script>
    $(document).ready(function(){
    $(".desc_div").slideUp();

    $(".open_div").click(function(){
        if($(this).hasClass('selected')){
           $(this).removeClass('selected'); 
             $(this).addClass("selected").next(".desc_div").slideUp("slow", function() {
            $(this).prev().removeClass('selected');

        }); 
        }
        else{               $(this).addClass("selected").next(".desc_div").slideDown("slow");
            }
    });
});
</script>

Answer 7

原来这么简单！！干杯..

jQuery(document).ready(function($){ 
    $(".desc_div").hide();
    $(".open_div").click(function(){ 
        $(this).next().slideToggle("slow"); 
    });
});

Answer 8

 On One click of button, it shows the div and on another click it hides the div. 


<button type="button" id="first">Click Me!</button>
  <div id="something">Something</div>

    <script>
      $(document).ready(function(){
        $('#something').hide();
        $prevIndex = 0;
        $i = 0;
        $('#first').click(function(){
            var index = $('#first').index($(this));
            if(index == $prevIndex)
            { // if same 
                $i = $i;            
            }else{ // if not same 
                $i = 0;         
            }
            if ($i % 2 === 0) { 
                /* we are even */
                /* do first click */
                $('#something').show();
            } else {
                /* we are odd*/
                /* do second click */
                $('#something').hide();
            } 
            $i++;
            $prevIndex = index; 
        });
      });
    </script>

如何在第二次点击时关闭 div？

How to close div on second click?

html

jquery

accordion

collapse