Question

我想显示/隐藏2个兄弟元素onclick。

在页面上我有多个detailLinksItem，它将包含此显示/隐藏功能，因此只需选择兄弟姐妹。对于兄弟姐妹onclick和.style.display = 'block';，我需要.showLess到.moreLinksContainer。

            <div class="detailLinksItem">
                <div class="searchIcon"></div>
                <a href="#"></a>
                <a href="#"></a>
                <div class="detailDate"></div>
                <div class="arrow-down"></div>
                <a href="#" class="showMore" onclick="showStuff(moreLinksContainer); return false;">Show more</a>
                <a href="#" class="showLess" onclick="hideStuff('moreLinksContainer'); return false;" style="display: none;">Show less</a>
                <div class="moreLinksContainer" style="display: none;">
                <ul>
                    <li><a href="#">Link Title Goes Here!!</a><div class="moreDetailDate">6 hours</div></li>
                    <li><a href="#">Link Title Goes Here!!</a><div class="moreDetailDate">1 day</div></li>
                    <li><a href="#">Link Title Goes Here!!</a><div class="moreDetailDate">3 days</div></li>
                    <li><a href="#">Link Title Goes Here!!</a><div class="moreDetailDate">1 week</div></li> 
                </ul>
                </div>
            </div>

Answer 1

我会使用javascript向detailLinksItem div添加一个额外的类，然后使用级联css来显示或隐藏相应的子元素。

CSS：

.detailLinksItem .showLess, .detailLinksItem .moreLinksContainer {
   display: none;
}
.detailLinksItem.more .showMore {
   display: none;
}
.detailLinksItem.more .showLess, .detailLinksItem.more .moreLinksContainer {
   display: block;
}

JS：

detailLinksItemElement.className = "detailLinksItem more";

Answer 2

<script type="text/javascript">
    function showStuff(_container){
       var c = document.getElementsByClassName(_container);
       c[0].style.display = "block";
    }
    function hideStuff(_container){
       var c = document.getElementsByClassName(_container);
       c[0].style.display = "none";
    }
</script>

Answer 3

既然你说jQuery很好：

$(function(){
    // When .showMore is clicked
    $(".showMore").on("click", function(){
        // Of all the succeeding elements, show those with these classes
        $(this).nextAll(".showLess, .moreLinksContainer").show();    
    });
    // When .showLess is clicked
    $(".showLess").on("click", function(){
        // Take the next element, and this element, and hide them
        $(this).next().andSelf().hide();    
    });
});

演示：http://jsfiddle.net/EmNsT/ 有了这个，您可以从链接中删除onclick属性：

<a href="#" class="showMore">Show more</a>
<a href="#" class="showLess">Show less</a>

将内联样式移出到样式表：

.showLess,
.moreLinksContainer {
    display: none;
}

Answer 4

您应该避免添加内联事件声明。理想情况下，在document.ready操作中添加单击事件。这是一个适合您特定要求的工作示例： http://jsfiddle.net/P8trE/

它还具有隐藏'show less'链接所需的操作：）

Answer 5

我建议你从jQuery开始，它会帮助你加快你的javascript开发。在您使用jQuery的情况下，您可以这样做：

删除您当前的onclick
将jQUery库包含在头部
$（function（）{ //分配自定义事件 $（ “相册更多>>暂”）。点击（函数（）{ $（“。showMore”）。hide（）; //隐藏显示按钮 $（“。showLess”）。show（）; //显示隐藏按钮 $（ “moreLinksContainer”）了slideDown（）。 //打开有效的容器 }）

$（ “hideStuff”）。单击（函数（）{ $（“。showLess”）。hide（）; //隐藏隐藏按钮 $（“。showMore”）。show（）; // show show button $（ “moreLinksContainer”）效果基本show（）; //隐藏容器 }） }）;

Javascript onclick选择有类的兄弟

5 个答案: