Question

我有一个HTML页面，其中包含20个主题的列表。我希望如此，当您点击其中一个主题时，会在其下方弹出2或3篇带有链接的文章。

我正在尝试onclick，但这意味着要编写大量代码，因为您必须为每个主题声明所有div样式。

有没有一种简单的方法可以做到这一点？

我目前正在写这20次，并宣布60个div格式：

<div class = "mousehand"
id = "show_first"
onclick ="this.style.display = 'none';
document.getElementById('show_second').style.display='block';
document.getElementById('dropdown').style.display='inline';
"> show text </div>

<div class = "mousehand"
id = "show_second"
onclick ="this.style.display = 'none';
document.getElementById('show_first').style.display='block';
document.getElementById('dropdown').style.display='none';
"> hide text </div>


<div id ="dropdown"> this is the text to be shown</div>

Answer 1

您可以使用一些Javascript完成此操作。在ul：

中添加li

<li>Title
    <ul>
        ...
    </ul>
</li>

使用CSS将内部ul的显示设置为none。然后使用Javascript创建一个函数，将内部ul的显示属性更改为block。

Answer 2

正如已经提到的，jQuery可以使这非常简单，但是你的主要代码保存将来自利用事件冒泡。你可以这样做，你可以像这样构建你的HTML：

<div id="topics">
    <div class="item">
        <div class="show">
            show text 1
        </div>
        <div class="hide">
            hide text 1
        </div>
        <div class="text">
            this is the text to be shown 1
        </div>
    </div>
    <div class="item">
        <div class="show">
            show text 2
        </div>
        <div class="hide">
            hide text 2
        </div>
        <div class="text">
            this is the text to be shown 2
        </div>
    </div>
</div>

现在，不是每onclick将div处理程序附加到每一端，而是将其附加到父元素。要使用jQuery执行此操作：

$(window).load(function(){                        //Do this when the page loads
    $('#topics').bind('click', function(event) {  //Find the element with ID 'topics' and attach a click handler
        var t = $(event.target);                  //event.target is the element that was actually clicked, $() gets the jQuery version of it
        if(t.hasClass('show')) {                  //If it is a 'show' element...
            t.siblings('.hide').show();           //...show the other two elements...
            t.siblings('.text').show();
            t.hide();                             //...and hide the clicked element
        }
        if(t.hasClass('hide')) {                  //If it is a 'hide' element...
            t.siblings('.show').show();           //...show the 'show' element...
            t.siblings('.text').hide();           //...and hide the other two
            t.hide();
        }
    });
});

就是这样！ Here's a demo

HTML中的多个onclick

2 个答案: