在滑块上显示/隐藏 div答案

【问题标题】：show/hide div on slider在滑块上显示/隐藏 div
【发布时间】：2013-09-05 05:23:43
【问题描述】：

我有一个正在工作的滑动机制，但是当滑动机制触发时，我无法让 nfooter 的 div 类隐藏。当用户点击img src question.png时触发幻灯片。

当用户选择 question.png 图像时，我希望 nfooter（这是另一个图像）消失。当用户第二次选择 question.png 图像时，幻灯片机制隐藏而 nfooter 显示。

再次，幻灯片机制工作正常，我只是无法让 nfooter 和 question.png 玩得很好。

<pre>
<script type="text/javascript">

    // When the DOM is ready, initialize the scripts.
    jQuery(function( $ ){

    // Get a reference to the container.
    var container = $( ".container" );


    // Bind the link to toggle the slide.
    $( "a" ).click(
    function( event ){
    // Prevent the default event.
    event.preventDefault();

    // Toggle the slide based on its current
    // visibility.
    if (container.is( ":visible" )){

    // Hide - slide up.
    container.slideUp( 300 );

    } else {

    // Show - slide down.
    container.slideDown( 300 );

    }
    }
    );

    });

    </script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>

<body>
<a href="#"><img src="../question.png" /></a>
<div class="nfooter"></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='swipe.js'></script>

<div class='container'>
<div class='inner'>
    </div>
    </div>
</pre>

【问题讨论】：

如何制作一个小提琴来显示您的问题。
观察：您应该将 <script> 标签移动到头部或正文的末尾

标签： javascript jquery html css

【解决方案1】：

您是否尝试过简单地隐藏和显示它：

if (container.is( ":visible" )){
    // Hide - slide up.
    container.slideUp(300, function(){ $('.nfooter').show(); });
}
else 
{
    // Show - slide down.
    container.slideDown(300, function(){ $('.nfooter').hide(); });
}

【讨论】：

从字面上看，我整天都在研究这个问题，这两行代码修复了它。非常感谢！
无论如何我可以添加一些定时元素来控制 nfooter 何时重新出现。如果我可以在 nfooter 重新出现之前完全隐藏 question.png，那将是理想的。

【解决方案2】：

另一个版本

// When the DOM is ready, initialize the scripts.
jQuery(function($) {
    // Get a reference to the container.
    var container = $(".container"), nfooter = $('.nfooter');
    // Bind the link to toggle the slide.
    $("a").click(function(event) {
        event.preventDefault();

        var visibility = container.is(':visible');
        container.slideToggle(300);
        nfooter.toggle(visibility)
    });
});

【讨论】：

当我尝试这个版本时，两个图像在切换而不是交替出现时同时出现。