Question

我正在尝试在网站上显示和隐藏文字。但是我必须遍历一个xml文件并获取所有元素。我很难解释，所以这里是jsfiddle：http://jsfiddle.net/liveandream/3P2b6/

它不适用于每个元素。当你点击阅读更多时，它会使两个都关闭，而关闭使两个都恢复。我将得到的结果数量几乎不可能知道。我希望有一个人可以帮助我。提前谢谢！

Answer 1

问题在于您将点击功能附加到#read2，并且有两个ID为read2的元素。请注意，元素在文档中应该具有唯一的ID，但这是一个不同的讨论。

每当您点击一个元素时，它应该找到要折叠或关闭的元素。例如，当我点击read1时，它应该打开或关闭amenities1，当我点击read2时，它应该打开或关闭amenities2。这意味着您必须重命名ID和类才能使其正常工作。

您可以通过执行以下操作来获取该数字：单击某个元素时，将其id作为字符串并从该字符串中获取该数字。然后，构造要打开或关闭的元素的id或类（通过执行amenities + number）并打开/关闭它。

Answer 2

jsFiddle example 怎么样？对我所做的HTML的唯一更改是使ID唯一（第一个read2现在是read1）。

jQuery的：

$(".amenities").hide();
$('.readMore').click(function() {
    if ($(this).next().is(':visible')) {
        $(this).next().hide();
        $(".arrow",this).html("►");
    } else {
        $(this).next().show();
        $(".arrow",this).html("▼");
    }
});

HTML：

<div class="amenitiesWrap">
    <div class="readMore" id="read1"> <span class="arrow">►</span> See Room Amenities</div>
    <div class="amenities"><p>Donec mollis imperdiet lacus ut rhoncus. Pellentesque tincidunt leo vitae mauris varius ut mattis erat condimentum. Donec non tellus ut augue rutrum dignissim vitae eu nibh. Nunc vitae lacinia lectus. Aliquam erat volutpat. Sed quis placerat dolor. Morbi tempus tellus quis eros iaculis posuere. Vivamus a risus nisl. Quisque non turpis massa, vitae mollis urna. Etiam placerat quam eget purus pellentesque rhoncus commodo lorem placerat. Ut in justo enim. Mauris vitae sem eros. Ut aliquam bibendum nulla quis posuere. Maecenas est quam, scelerisque adipiscing laoreet sed, lobortis ac eros. Donec consectetur augue vel nunc rutrum vestibulum.<br />
<div class="closeAmenities">Hide Amenities</div></p>
    </div>
</div>

<div class="amenitiesWrap"><div class="readMore" id="read2"> <span class="arrow">►</span> See Room Amenities</div><div class="amenities"><p>Donec mollis imperdiet lacus ut rhoncus. Pellentesque tincidunt leo vitae mauris varius ut mattis erat condimentum. Donec non tellus ut augue rutrum dignissim vitae eu nibh. Nunc vitae lacinia lectus. Aliquam erat volutpat. Sed quis placerat dolor. Morbi tempus tellus quis eros iaculis posuere. Vivamus a risus nisl. Quisque non turpis massa, vitae mollis urna. Etiam placerat quam eget purus pellentesque rhoncus commodo lorem placerat. Ut in justo enim. Mauris vitae sem eros. Ut aliquam bibendum nulla quis posuere. Maecenas est quam, scelerisque adipiscing laoreet sed, lobortis ac eros. Donec consectetur augue vel nunc rutrum vestibulum.<br />
<div class="closeAmenities">Hide Amenities</div></p></div></div>

Answer 3

http://jsfiddle.net/3P2b6/3/

为你修好了。可能没有尽可能优化，但应该可以正常工作。

在jquery中通过show和hide函数循环

3 个答案: