Question

我有Show content按钮，当用户点击它时，需要显示类tip的div。如何检查使用同一类的其他div是否可见，如果是，则隐藏它们？

$('.js-help-content').hide();

$('.js-show-help').click(function(e){
    e.stopPropagation();
    $('.js-help-content').fadeToggle(200);
});
$('.js-help-content').click(function(e){
    e.stopPropagation();
});
$(document).click(function(){
     $('.js-help-content').fadeOut(200);
});

Answer 1

将此行添加到按钮onclick功能：

$('.tip:visible:not(.js-help-content)').hide();

它对您正在切换的js-help-content课程没有任何影响，并且还会隐藏所有其他可见的tip课程。

像这样：

$('.js-show-help').click(function(e){
    e.stopPropagation();
    $('.tip:visible:not(.js-help-content)').hide();
    $('.js-help-content').fadeToggle(200);
});

Answer 2

试试这个：

$('.tip:visible').not(this).hide();

＆＃13;

$('.js-help-content').click(function(e){
    e.stopPropagation();
    $('.tip:visible').not(this).hide();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="js-show-help">Show content</p>

<div class="located-content tip js-help-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dolore ad, laboriosam sequi quia doloremque atque ex culpa aperiam ut.</p>
</div>

<div class="tip">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum repudiandae, sequi mollitia inventore provident impedit numquam molestiae culpa dolorem minima odit quod nemo facilis voluptate esse quis voluptatem velit, architecto iusto dolorum praesentium! Vel deserunt quod ad, quas aliquid rerum.</p>
</div>

＆＃13;

jQuery - onClick检查是否可以看到具有相同类的其他div并隐藏它

2 个答案: