Hai pracuję z pokazem / Ukryj suwak z div..evrying działa dobrze z moim kodowaniem .. Ale chcę, mój div lub moją zawartość będzie automatycznie ukryć, gdy kliknął kolejny przycisk (obraz w moim kodowaniu) ..

Mam nadzieję, że ktokolwiek może mi pomóc ... z góry ..

To jest mój 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>

To jest moje 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;
}

To jest mój 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);
0
user 22 listopad 2013, 12:45

2 odpowiedzi

Najlepsza odpowiedź

Ponieważ chcesz ukryć div po kliknięciu przycisku, powinieneś zrobić go document po kliknięciu do ukrycia. Spróbuj czegoś takiego.

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

Użyj event.stopPropagation();, aby zatrzymać zdarzenie dokumentu, aby uruchomić klasę {X1}}. Może ci pomóc.

0
amostk 22 listopad 2013, 09:45

Za pomocą jQuery.

$("other_button").on('click', function() {
    $("div_to_hide").toggle();
});
1
Jijo 17 styczeń 2014, 09:59