Question

我正在使用Slide down＆amp;它工作正常。但我的问题是，当用户打开此页面时，如果用户单击则向上滑动，然后仅向下滑动。

<script type="text/javascript">
    jQuery(function ($) {
        $(".block-layered-nav dt").click(function () {
            if ($(this).next("dd").css("display") == "none") {
                $(this).next("dd").slideDown(1000);
                $(this).removeClass("closed");
            } else {
                $(this).next("dd").slideUp(1000);
                $(this).addClass("closed");
            }
        });
    });
</script>

我做错了什么

Answer 1

使用元素
添加类[m](int i) { return std::make_pair(i / m, i % m); }

工作演示

closed

jQuery(function($) {
  $('dd').hide()
  $(".navigation dt").click(function() {
    if ($(this).next('dd').is(":visible")) {
      $(this).next('dd').slideToggle('slow').toggleClass('close');
    } else {
      $(this).next('dd').slideToggle('slow').toggleClass('close');
    }
  });
});

Answer 2

您可以使用$.fn.slideToggle()和$.fn.toggleClass()来解决状态检测问题。解决方案：

jQuery(function($) {
  $(".navigation dt").click(function() {
    $(this).next('dd').stop(true, false).slideToggle().toggleClass('close');
  });
});

.closed {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation">
  <dt>test</dt>
  <dd class="closed">sample</dd>
</div>

您只需要确定类的初始状态和CSS显示属性。并且，还添加了$.fn.stop()函数以避免动画故障。

Answer 3

<html>

<head>
    <script src="jquery.js">
    </script>
</head>

<body >
<div class="test4" style="border: 1px solid black;">

<h1>Hi </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas ducimus, animi provident laudantium necessitatibus odit. Qui quam iusto optio libero cum, nemo perferendis rerum veritatis expedita, est totam dolore natus!</p>
</div>

    <div  class="test1">    
        <button>Show Button</button>
    <button id="test">Button 2</button>
</div>

<script>

    $(document).ready(function(){

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

$("$test4").slideToggle();


});

$("#test").click(function()
{

    $("#test4").slideDown();
});     
    });
</script>
</body>
</html>

向下滑动＆amp;向上滑动

3 个答案: