Question

点击金融路演＆＃39;例如，它打开。但是当我再次点击时，它会暂时关闭然后再次打开。我试着寻找答案，但是当谈到这个时，我只是一个巨大的菜鸟。我希望有人可以帮助我！

这是我使用的代码：

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

使用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 2

小提琴：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中添加了一个类

 <div class="desc_div up">

Answer 3

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

可以这样简单!!干杯..

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

Answer 5

更新了你兄弟的剧本。我只在幻灯片上添加了一些更改。希望这会有所帮助。

$(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");
    }

});
});

enter image description here

DEMO FIDDLE

Answer 6

FIDDLE：

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

Answer 7

我在这里改变了你的小提琴：http://jsfiddle.net/59f29b1L/8/

首先，你必须改变html。让所有open_div环绕你的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 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？

8 个答案: