显示一个div但隐藏所有其他div不起作用

I have one jQuery code which show/hide the extra info on click. But I have a requirement, so that when one info is opened, the other info should be hidden. i.e when a particular link is clicked, that info should be opened and other info should be hidden. How to do that?

我有一个jQuery代码，显示/隐藏点击的额外信息。但我有一个要求，所以当打开一个信息时，其他信息应该被隐藏。即，当点击特定链接时，应打开该信息并隐藏其他信息。怎么做？

CSS

CSS

.linkinfo {  display: none; }  
.nn { margin: 5px 0 5px 0; font-weight: bold;}

jQuery:

jQuery的：

jQuery(document).ready(function($) {
    $('.link').on('click', function () {
        $(this).text(function (i, txt) {
            return txt.indexOf('MORE') != -1 ? 'HIDE' : 'MORE';
        }).closest('.nn').next('.linkinfo').slideToggle();
    });
});

HTML

HTML

Red blood cells (RBCs) principal means of delivering oxygen to the body tissues.
<a class="link" href="javascript:void(0)">MORE</a><div class="linkinfo">
Also called erythrocytes. 
</div><br>

White blood cells (WBCs) are the cells of the immune system against infectious disease. 
<a class="link" href="javascript:void(0)">MORE</a><div class="linkinfo">
Also called leukocytes.
</div><br>

Platelets are blood cells whose function  is to stop bleeding.
<a class="link" href="javascript:void(0)">MORE</a><div class="linkinfo">
Also called thrombocytes.
</div><br>

3 个解决方案

#1

See if this solution is helpful

看看这个解决方案是否有用

I have added notselected class by default to all the a tags

我默认将未选择的类添加到所有标签中

html

HTML

  Red blood cells (RBCs) principal means of delivering oxygen to the body tissues.
<a class="link notselected" href="javascript:void(0)">MORE</a>

<div class="linkinfo">Also called erythrocytes.</div>
<br>White blood cells (WBCs) are the cells of the immune system against infectious disease.
<a class="link notselected" href="javascript:void(0)">MORE</a>

<div class="linkinfo">Also called leukocytes.</div>
<br>Platelets are blood cells whose function is to stop bleeding.
<a class="link notselected" href="javascript:void(0)">MORE</a>

<div class="linkinfo">Also called thrombocytes.</div>
<br>

jquery

jQuery的

$('.link').on('click', function () {
$('.link').not(this).removeClass('selected').addClass('notselected');
if ($(this).hasClass('selected')) {

    $(this).addClass("notselected").removeClass('selected');
} else $(this).removeClass('notselected').addClass("selected");

toggleLabel();
});

function toggleLabel() {
    $('.selected').text("HIDE");
    $(".notselected").text('MORE');
    $('.selected').next('.linkinfo').slideToggle();
    $(".notselected").next('.linkinfo').hide();

}

DEMO

DEMO

#2

Do you want something like this:

你想要这样的东西：

JSFiddle: http://jsfiddle.net/TrueBlueAussie/3dE9V/1/

jQuery(document).ready(function($) {
    $('.link').on('click', function () {
        var $link = $(this).text(function (i, txt) {
            return txt.indexOf('MORE') != -1 ? 'HIDE' : 'MORE';
        }).next('.linkinfo').slideToggle();
        $('.linkinfo').not($link).slideUp();
    });
});

Note: Your example data has no .nn class applied to the elements, but you do not actually need it.

注意：您的示例数据没有应用于元素的.nn类，但实际上并不需要它。

#3

I have tried to solve your problem but i could not change the title

我试图解决你的问题，但我无法改变标题

Please try this

请试试这个

Red blood cells (RBCs) principal means of delivering oxygen to the body tissues.
<a class="link" href="javascript:void(0)">MORE</a>
<div class="linkinfo">
Also called erythrocytes. 
</div><br>

White blood cells (WBCs) are the cells of the immune system against infectious disease. 
<a class="link" href="javascript:void(0)">MORE</a><div class="linkinfo">
Also called leukocytes.
</div><br>

Platelets are blood cells whose function  is to stop bleeding.
<a class="link" href="javascript:void(0)">MORE</a><div class="linkinfo">
Also called thrombocytes.
</div><br>
<style>
.linkinfo{
display:none;
}
</style>
<script>
jQuery(document).ready(function($) {
    $('.link').on('click', function () {
        $(this).text(function (i, txt) {
            return txt.indexOf('MORE') != -1 ? 'HIDE' : 'MORE';
        }).next('.linkinfo').show().siblings('.linkinfo').css( "display", "none");

    });
});
</script>

Hide show is working fine but more and hide is not working in this query

隐藏显示工作正常，但更多隐藏在此查询中不起作用