Question

我有一个正在运行的幻灯片机制，但是当幻灯片机制触发时，我遇到了让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>

Answer 1

您是否曾尝试隐藏并显示它：

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

Answer 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)
    });
});

在滑块上显示/隐藏div

2 个答案: