2

我想显示/隐藏一个 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>
4

5 回答 5

0

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

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

于 2012-05-24T21:22:38.997 回答
0

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

  1. 删除当前的 onclick
  2. 将 jQuery 库包含到头部

  3. $(function() { //分配自定义事件 $(".showMore").click(function(){ $(".showMore").hide();//隐藏显示按钮 $(".showLess"). show();//显示隐藏按钮 $(".moreLinksContainer").slideDown(); //打开容器有效果 })

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

于 2012-05-24T21:24:14.160 回答
0 
<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>
于 2012-05-24T21:19:52.640 回答
0

既然你说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;
}
于 2012-05-24T21:20:35.517 回答
0

我会使用 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";
于 2012-05-24T21:25:56.003 回答