Javascript onclick选择具有类的兄弟答案

【问题标题】：Javascript onclick select sibling that has classJavascript onclick选择具有类的兄弟
【发布时间】：2012-05-31 12:02:03
【问题描述】：

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

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

            <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>

【问题讨论】：

您是否想要一个纯 JavaScript 解决方案，或者您是否有兴趣使用 jQuery 等工具（如果它们更容易）？
我强烈推荐你试试 jQuery。比纯 JavaScript 更容易，并且它已被开发用于执行此类操作。干杯！

标签： javascript onclick show-hide

【解决方案1】：

<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>

【讨论】：

非常感谢，非常感谢您的帮助 :)

【解决方案2】：

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

它还具有隐藏“少显示”链接所需的操作:)

【讨论】：

【解决方案3】：

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

删除当前的点击
在头部包含 jQUery 库
$（函数（）{ //分配自定义事件 $(".showMore").click(function(){ $(".showMore").hide();//隐藏显示按钮 $(".showLess").show();//显示隐藏按钮 $(".moreLinksContainer").slideDown(); //打开容器效果 })

$(".hideStuff").click(function(){ $(".showLess").hide();//隐藏隐藏按钮 $(".showMore").show();//显示显示按钮 $(".moreLinksContainer").slideUp(); //隐藏容器 }) });

【讨论】：

【解决方案4】：

既然你说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;
}

【讨论】：

【解决方案5】：

我会使用 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";

【讨论】：

非常感谢，非常感谢您的帮助 :)