Question

我有一个菜单，可以使用点击功能打开隐藏的div。我想在点击切换的div之外使它们关闭。我尝试过很少的东西，但它会渲染一个点击功能，因此在再次点击时它不会关闭隐藏的div。

$(document).on('click', '.user-alt > li > a', function(e){
   var popup = $(this).parent('li').find('.bar-pop');
   $(".user-alt > li .bar-pop").not(popup).hide();
   $('.menu-accountparent.selectedMenuItem').not($(this)).removeClass('selectedMenuItem');
   $(this).toggleClass('selectedMenuItem');
   popup.toggle();
});

这是JSfiddle：http://jsfiddle.net/fkrosq8w/

我已尝试过这些并且有效，但就像我说再次点击菜单中的链接不会关闭隐藏的框：

$('body').on('click', '*:not( .user-alt > li .bar-pop )', function() {
    var popup = $('.user-alt > li .bar-pop');
    popup.hide();
});

Answer 1

希望这有助于你

$text = "you and me";

$text = str_ireplace("you","me",$text);
//$text is "me and me";  
$text = str_ireplace("me","you",$text);
//$text is "you and you";

}）;

jsfiddle

Answer 2

修改：

根据您的评论，可能需要简化标记并以更简单的方式执行此操作。我不确定你对你的标记有多少控制权，但也许这会有所帮助：

鉴于此标记（我已在锚标记中添加了<ul class="user-alt"> <li class="messages"> <a title="Messages" class="toggle" href="#">Open/Close</a> <div class="bar-pop"> Hidden block Here </div> </li> <li class="messages"> <a title="Messages" class="toggle" href="#">Open/Close</a> <div class="bar-pop"> Hidden block Here </div> </li> <li class="messages"> <a title="Messages" class="toggle" href="#">Open/Close</a> <div class="bar-pop"> Hidden block Here </div> </li> </ul>类）：

div.bar-pop

默认隐藏.bar-pop{ display:none; border:1px solid #ccc; padding:10px; }：

$('.toggle').on('click', function(e){ e.preventDefault(); $(this).next().toggle(); });

然后像往常一样向后和向前切换它们：

toggle

然后，听取文档（或主体，如果您愿意）的点击，检查点击来自的元素的类名并做出相应的反应：如果类名与bar-pop或{{1}匹配，什么也不做，否则隐藏任何可见的弹出窗口。

$(document).on("click", function(e){ if(!e.target.className.match(/toggle|bar-pop/)){ $(".bar-pop").hide(); } });

这里是updated demo。

~~你可以这样做：~~

$(document).on("click", function(e){ if ($(".bar-pop").length && !e.target.className.match(/selectedMenuItem|bar-pop/)){ $(".selectedMenuItem").removeClass('selectedMenuItem'); $(".bar-pop").hide(); } });

~~Demo~~

点击功能关闭全部打开

2 个答案: