Question

我正在开设一个有菜单的网站。在菜单中我有两个甚至三个链接。链接将在菜单旁边打开带滑动效果的div。（菜单是右栏，div将向左打开。）

所以我想说我点击链接（A）。链接（A）打开带有一些文本的div。当我再次单击链接（A）时，div将消失。因此，链接（B）的逻辑相同，但它将显示一个库。那不是重要的部分。

我希望能够在div内部的信息之间切换。如果我在使用链接（A）中的信息打开div时单击链接（B），我只想让div切换内容，而不是关闭并重新打开。

基本上 - 如果我点击打开div的同一个链接，它就会消失。但是，如果我点击其他链接，内容应该只是改变。

有什么建议吗？

这是div：

    <div class="col-md-2" id="openInfo">
    <div id="info"> <p>INFO</p></div>

    <div id="images">
        <p>IMAGES</p>
    </div>

</div>

链接：

    <a href="#openInfo" id="treatInfo">TREATMENT INFO</a>

    <a href="#openInfo" id="gallery" >GALLERY</a>

剧本：

  $("#gallery").click(function () {
    $("#openInfo").toggleClass("open");
    $("#images").css("display", "block");
    $("#info").css("display", "none");
});


$("#treatInfo").click(function () {
    $("#openInfo").toggleClass("open");
    $("#info").css("display", "block");
    $("#images").css("display", "none");
});

Answer 1

您可以添加一个检查何时切换open类，这意味着当该条件不为真时，.open类将不会切换（并保持原样）：

$("#gallery").click(function () {
    if (!$("#openInfo").is(".open") || $("#images").is(":visible")) {
        $("#openInfo").toggleClass("open");
    }
    $("#images").css("display", "block");
    $("#info").css("display", "none");
});


$("#treatInfo").click(function () {
    if (!$("#openInfo").is(".open") || $("#info").is(":visible")) {
        $("#openInfo").toggleClass("open");
    }
    $("#info").css("display", "block");
    $("#images").css("display", "none");
});

Answer 2

您可以在 div 中创建其他属性，以了解是应该替换内容还是关闭内容。例如＆＃34;数据内容＆＃34;

<div id="myDiv" data-content="images">
    <p>IMAGES</p>
</div>

使用jQuery，您可以使用以下方法检索该属性：

$('#myDiv').attr('data-content');

您也可以使用以下方式设置值：

$('#myDiv').attr('data-content','images');
$('#myDiv').attr('data-content','info');

这样，您就可以知道是否应该替换内容或关闭div：

$("#treatInfo").click(function () {
    if($('#myDiv').attr('data-content') == 'info'){
        // close div
    }else{
        $('#myDiv').attr('data-content','info');
        // load info content
    }
});

jQuery根据点击的链接切换/更改内容

2 个答案: