Question

我有这个js代码，在点击按钮后显示和隐藏页面上的一些内容。我添加了第二个脚本（slickbox2），通过单击第二个按钮对其他内容执行相同操作。我需要解决的问题是当显示第一个内容并且我点击第二个按钮时，我想要隐藏第一个内容。谢谢！

jQuery(document).ready(function() {
    //hides the slickbox as soon as the DOM is ready
    jQuery('#slickbox').hide();

    // toggles the slickbox on clicking the noted link  
    jQuery('#slick-toggle').click(function() {
        jQuery('#slickbox').toggle(400);
        return false;
    });

    jQuery('#slickbox2').hide();
    // toggles the slickbox on clicking the noted link  
    jQuery('#slick-toggle2').click(function() {
       jQuery('#slickbox2').toggle(400);
       return false;
    });

});

Answer 1

BTW您可以在所有代码中使用$代替jQuery：

jQuery('#slick-toggle2').click(function() {
    jQuery('#slickbox2').toggle(400);
    $('#slickbox1').toggle(400);
    return false;
});

Answer 2

首先，您需要为所有光滑盒提供类，例如slickbox然后你的Javascript就像

    <script type="text/javascript">
    jQuery(document).ready(function() {
        $('.slickbox').hide();      //hides all elements with class slickbox

        $('.slickbox').click(function(){
             $('.slickbox').hide();
             $(this).toggle(400);
        })
    });
    </script>

Answer 3

单击第二个按钮

时，可以使用hide（）函数始终隐藏第一个内容

jQuery('#slick-toggle2').click(function() {
  jQuery('#slickbox').hide(400);
  jQuery('#slickbox2').toggle(400);
  return false;
});

请勿使用切换，否则会隐藏内容

Answer 4

改变了几点。

$(document).ready(function(){
    $('[id*=slickbox]').hide(); //hide your slickboxs

    $('#slick-toggle').click(function(){
        $('#slickbox').show();
        $('#slickbox2').hide();
    });

    $('#slick-toggle2').click(function(){
        $('#slickbox').hide();
        $('#slickbox2').show();
    });
});

javascript切换脚本

4 个答案: