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/

jQuery切换以隐藏元素

1 个答案: