Question

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

CSS

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

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

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>

Answer 1

你想要这样的东西：

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();
    });
});

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

Answer 2

查看此解决方案是否有用

我默认将notselected类添加到所有a标记

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的

$('.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

Answer 3

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

请试试这个

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>

隐藏显示工作正常，但隐藏在此查询中无法正常工作

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

3 个答案:

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