Question

人

我有以下带有wrap（notice-wrap）的HTML代码：

<div class="notice-title">
    Title
</div>

<div class="notice-content">
    Content text
</div>

<div class="notice-toggle" value="Hide" onclick="toggle()">
    <a href="#"><img src="../img/icon_rollout.png"></a>
</div>

切换脚本

    function toggle() {
    var newStatus = $('.notice-toggle').val() === "Hide" ? "Show" : "Hide";
    $('.notice-toggle').val(newStatus);
    if (newStatus == "Show") {
        $("div.notice-content").css('overflow','hidden');
        $("div.notice-content").css('height','80px');
        $("div.notice-wrap").css('height','187px');
    }
    else {
        $("div.notice-content").css('overflow','visible');
        $("div.notice-content").css('height','100%');
        $("div.notice-wrap").css('height','100%');
    }
}

当我点击切换按钮时，打开所有项目。如何只打开我选择的那个元素？

P.S。我也使用Angular

提前致谢！

Answer 1

也许你可以改变这个：

function toggle() {
    var newStatus = $('.notice-toggle').val() === "Hide" ? "Show" : "Hide";
    $('.notice-toggle').val(newStatus);
    if (newStatus == "Show") {
        $("div.notice-content").css('overflow','hidden');
        $("div.notice-content").css('height','80px');
        $("div.notice-wrap").css('height','187px');
    }
    else {
        $("div.notice-content").css('overflow','visible');
        $("div.notice-content").css('height','100%');
        $("div.notice-wrap").css('height','100%');
    }
}

为：

function toggle() {
    var noticeToggleElement = $(this);
    var newStatus = noticeToggleElement.val() === "Hide" ? "Show" : "Hide";
    noticeToggleElement.val(newStatus);
    if (newStatus == "Show") {
        noticeToggleElement.css('overflow','hidden');
        noticeToggleElement.css('height','80px');
        $("div.notice-wrap").css('height','187px');
    }
    else {
        noticeToggleElement.css('overflow','visible');
        noticeToggleElement.css('height','100%');
        $("div.notice-wrap").css('height','100%');
    }
}

因为您应该使用鼠标单击来切换元素的上下文。

当您使用jQuery时，如果从HTML标记中删除onclick并在javascript代码中对在文档就绪时执行的函数进行绑定应该会更好：

$(function(){

    $('div.notice-content').click(toggle);

})

但这只是一个加分。

Answer 2

首先应该做的是将样式从js移到css，并有其他类的变体，例如：

.notice-title--toggled {
...
}

.notice-content--toggled {
...
}

.notice-toggle--toggled {
...
}

现在您可以很好地分离关注点，并且您的切换功能可以只切换这些元素的类。此外，您应该在文档就绪时放置此切换点击处理程序，因此最终结果将是：

$(function) {
  $('.notice-toggle').click(function() {
    $('.notice-title').toggleClass('notice-title--toggled');
    $('.notice-content').toggleClass('notice-content--toggled');
    $('.notice-toggle').toggleClass('notice-toggle--toggled');
  });
}

功能切换 - 打开所有项目

2 个答案: