如何使div自动隐藏当点击其他按钮

Question

hai im使用显示/隐藏滑块与div..evrything工作正常与我的代码.. 但我想我的div或我的内容会自动隐藏，当我点击另一个按钮（在我的编码图像）..

我希望有人能帮助我提前this..thanks ..

这是我的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

既然你要隐藏的div当你点击一个按钮，你应该使它成为document点击隐藏。尝试这样的事情。

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

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

Answer 2

使用jQuery，

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

Answer 3

使用jQuery

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