Question

我正在使用show / hide滑块与div ..evrything工作正常我的编码.. 但我希望我的div或我的内容将自动隐藏当我点击另一个按钮（我的编码中的图像）..

我希望任何人都可以帮助我...提前谢谢......

这是我的HTML

<div id="slidingDiv">
    <a href="#" class="show_hide" rel="#slidingDiv11">
        <img src="../img/choose/mens.png">
    </a>

    <a href="#" class="show_hide" rel="#slidingDiv12">
        <img src="../img/choose/womens.png">
    </a>
    <div id="slidingDiv11">
        <img src="../img/choose/clothings.png"><br><br>
        <img src="../img/choose/shoes.png"><br><br>
        <img src="../img/choose/bags.png"><br><br>
        <img src="../img/choose/accessories.png">
    </div>
    <div id="slidingDiv12">
        <img src="../img/choose/clothings.png"><br><br>
        <img src="../img/choose/shoes.png"><br><br>
        <img src="../img/choose/bags.png"><br><br>
        <img src="../img/choose/accessories.png">
    </div>
</div>
<div id="slidingDiv1">
    <a href="#" class="show_hide" rel="#slidingDiv16">
        <img src="../img/choose/book.png">
    <a>
    <a href="#" class="show_hide" rel="#slidingDiv17">
        <img src="../img/choose/textbooks.png">
    </a>

    <div id="slidingDiv16">
        <img src="../img/choose/books1.png">
        <img src="../img/choose/books1.png">
        <img src="../img/choose/books1.png">
    </div>
    <div id="slidingDiv17">
        <img src="../img/choose/textbooks1.png">
        <img src="../img/choose/textbooks1.png">
        <img src="../img/choose/textbooks1.png">
    </div>
</div>

这是我的css

#slidingDiv, #slidingDiv1, #slidingDiv2, #slidingDiv3, #slidingDiv4, #slidingDiv5, #slidingDiv6, #slidingDiv7, #slidingDiv8, #slidingDiv9, #slidingDiv10, #slidingDiv11, #slidingDiv12, #slidingDiv13, #slidingDiv14, #slidingDiv15, #slidingDiv16, #slidingDiv17 {
    height:300px;
    padding:20px;
    margin-top:10px;
    border-bottom:5px;
    display:none;
}

这是我的js

$(document).ready(function () {
    $('.show_hide').showHide({
        speed: 1000, // speed you want the toggle to happen 
        easing: '', // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
        changeText: 0, // if you dont want the button text to change, set this to 0
        showText: 'View', // the button text to show when a div is closed
        hideText: 'Close' // the button text to show when a div is open
    });
});

(function ($) {
    $.fn.showHide = function (options) {

        //default vars for the plugin
        var defaults = {
            speed: 1000,
            easing: '',
            changeText: 0,
            showText: 'Show',
            hideText: 'Hide'

        };
        var options = $.extend(defaults, options);

        $(this).click(function () {

            $('.toggleDiv').slideUp(options.speed, options.easing);
            // this var stores which button you've clicked
            var toggleClick = $(this);
            // this reads the rel attribute of the button to determine which div id to toggle
            var toggleDiv = $(this).attr('rel');
            // here we toggle show/hide the correct div at the right speed and using which easing effect
            $(toggleDiv).slideToggle(options.speed, options.easing, function () {
                // this only fires once the animation is completed
                if (options.changeText == 1) {
                    $(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
                }
            });

            return false;
        });
    };
})(jQuery);

Answer 1

使用jQuery，

$("your_other_button").on('click', function() {
      $("your_div_to_hide").hide();
});

Answer 2

使用Jquery

$("other_button").on('click', function() {
    $("div_to_hide").toggle();
});

Answer 3

由于您要在单击按钮时隐藏div，因此单击隐藏时应将其设为document。尝试这样的事情。

$(".hide_show").click(function(event) { event.stopPropagation(); $(this).fadeToggle(1000);}); $(document).click(function() { $(".hide_show).fadeOut(1000); });

使用event.stopPropagation();停止文档事件以触发.hide_show类。可能会对你有帮助。

单击其他按钮时如何制作div自动隐藏

3 个答案: