Javascript 在滑块上显示/隐藏div_Javascript_Jquery_Html_Css

Javascript 在滑块上显示/隐藏div

javascript jquery html css

Javascript 在滑块上显示/隐藏div,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个幻灯片机制正在工作，但是当幻灯片机制触发时，我很难让nfooter的div类隐藏起来。当用户单击img src question.png时，会触发该幻灯片我希望当用户选择question.png图像时，nfooter（另一个图像）消失。当用户第二次选择question.png图像时，幻灯片机制将隐藏并显示nfooter 同样，幻灯片机制工作正常，我只是不能让nfooter和question.png玩得很好 <pre> <script type="text/javasc

我有一个幻灯片机制正在工作，但是当幻灯片机制触发时，我很难让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>


//当DOM就绪时，初始化脚本。
jQuery（函数（$）{
//获取对容器的引用。
var container=$（“.container”）；
//绑定链接以切换幻灯片。
$（“a”）。请按(
功能（事件）{
//阻止默认事件。
event.preventDefault（）；
//根据幻灯片的当前状态切换幻灯片
//能见度。
if（container.is（“：visible”））{
//隐藏-向上滑动。
容器。滑盖（300）；
}否则{
//显示-向下滑动。
容器。向下滑动（300）；
}
}
);
});

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

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

另一个版本

观察：你应该把你的

标签移到头部或身体的末端。我一整天都在做这个，这两行代码解决了这个问题。非常感谢你！无论如何，我可以添加一些定时元素来控制nfooter重新出现的时间。如果我能在nfooter重新出现之前将question.png完全隐藏，那将是理想的。当我尝试此版本时，它会在切换时同时显示两个图像，而不是交替显示。

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