jQuery切换隐藏一个元素

Question

我想创建一个事件点击按钮将显示菜单，但由于每个模块都有这样一个按钮，当我点击其他div的按钮时，当前菜单保持不变，是任何方式来解决这个问题？

我试图创造一些甚至在切换的第一部分，但它造成更大的问题：我需要点击两次另一个按钮使其出现......

HTML：

<ul> 
<li class="item"> 
<div class="portfolio-image-wrapper"> 
    <a class="hideModelLink" href="#">ModelLink</a> 
    <img src="assets/img/gallery/2.jpg" alt="" /> 
    <div class="edit-menu"> 
    <a href="#" target="_blank">Rename</a> 
    <a href="#" target="_blank">Delete</a> 
    </div> 
    <div class="item-info-overlay"></div> 
</div> 
<div class="item-info"> 
    <h4 class="text-dark no-margin title semi-bold"><a class="" target="_blank" href="#">Creative Illustration</a></h4> 
    <p>3/21/2014</p> 
</div> 
<a class="edit-button"></a> 
</li> 
... 
</ul> 

JS：

$('.edit-button').toggle(function(){ 
    $(this).siblings('.portfolio-image-wrapper').find('.edit-menu').css({ 
     display: 'block' 
    }); 
    $(this).siblings('.portfolio-image-wrapper').find('.item-info-overlay').css({ 
     background: 'none' 
    }); 
    $(this).css({ 
     'background-color': '#f5f5f5' 
    }); 
}, 
function(){ 
    $(this).siblings('.portfolio-image-wrapper').find('.edit-menu').css({ 
     display: 'none' 
    }); 
    $(this).siblings('.portfolio-image-wrapper').find('.item-info-overlay').css({ 
     background: 'rgba(153, 153, 153, 0.2)' 
    }); 
    $(this).css({ 
     'background-color': '#ffffff' 
    }); 
}); 

Answer 1

尝试切换您的通话toggle回功能身边......

$('.edit-button').toggle(function() { 
    $(this).siblings('.portfolio-image-wrapper').find('.edit-menu').css({ 
     display: 'none' 
    }); 
    $(this).siblings('.portfolio-image-wrapper').find('.item-info-overlay').css({ 
     background: 'rgba(153, 153, 153, 0.2)' 
    }); 
    $(this).css({ 
     'background-color': '#ffffff' 
    }); 
}, function() { 
    $(this).siblings('.portfolio-image-wrapper').find('.edit-menu').css({ 
     display: 'block' 
    }); 
    $(this).siblings('.portfolio-image-wrapper').find('.item-info-overlay').css({ 
     background: 'none' 
    }); 
    $(this).css({ 
     'background-color': '#f5f5f5' 
    }); 
}); 

演示在这里：http://jsfiddle.net/9jbUm/

此外，一些增强的代码在性能方面，和可读性...

$('.edit-button').toggle(function() { 

    // it is good to cache jquery objects, to save on expensive execution time 
    $this = $(this); 
    $this.css({ 'background-color': '#ffffff' }); 

    // also cache derived jquery objects... 
    $siblings = $this.siblings('.portfolio-image-wrapper'); 
    // use the jquery wrapper function to select within a specific context 
    $('.item-info-overlay', $siblings).css({ background: 'rgba(153, 153, 153, 0.2)' }); 
    // use `hide` instead of `.css({display: 'none'})` 
    $('.edit-menu', $siblings).hide(); 

}, function() { 

    $this = $(this); 
    $this.css({ 'background-color': '#f5f5f5' }); 

    $siblings = $this.siblings('.portfolio-image-wrapper'); 

    $('.edit-menu', $siblings).show();  
    $('.item-info-overlay', $siblings).css({ background: 'none' }); 

}); 

演示在这里：http://jsfiddle.net/9jbUm/1/

此外，如果您的jquery@1.9+中没有that version of toggle，那么您可以使用something like...

$.fn.toggleClick = function(){ 

    var functions = arguments ; 

    return this.click(function(){ 
      var iteration = $(this).data('iteration') || 0; 
      functions[iteration].apply(this, arguments); 
      iteration = (iteration + 1) % functions.length ; 
      $(this).data('iteration', iteration); 
    }); 
}; 

$('.edit-button').toggleClick(function() { 

    /* ... */ 

}); 

演示在这里：http://jsfiddle.net/9jbUm/2/