道场:基于在列表选择显示或隐藏的div(dojo: Show or hide divs based

2019-11-02 00:17发布

有没有一种简单的方法来做到这一点使用道场(jQuery的将是对我更容易,但我必须使用道场):我有一个简单的无序列表。 我不想道场样式列表中(因为它可能会,如果我使用了一些小部件)。 当我点击列表中的一个环节我想表明与链接相关的股利。 然后,如果我点击另一个链接列表中的第一个div皮和一个节目。

<div id="content">
<h2>Header</h2>
 <ul>
 <li><a href="#sub_content1">Link 1</a></li>
 <li><a href="#sub_content2">Link 2</a></li>
 <li><a href="#sub_content3">Link 3</a></li>
 </ul>

<div id="sub_content1" style="display:none;">
<h3>Sub Content Header 1</h3>
<p>Lorem ipsum veritas britas conflictum civa</p>
</div>

<div id="sub_content2" style="display:none;">
<h3>Sub Content Header 2</h3>
<p>Lorem ipsum mobius ceti</p>
</div>


<div id="sub_content3" style="display:none;">
<h3>Sub Content Header 3</h3>
<p>Lorem ipsum citrus pecto</p>
    <ul>
    <li>Lemons</li>
    <li>Limes</li>
    </ul>
</div>

  </div><!-- end of #content -->

Answer 1:

所以实际上你创建你自己的TabContainer的? 如果你真的想自己做你应该需要的东西是这样的:

require(["dojo/ready", "dojo/on", "dojo/dom-attr", "dojo/dom-style", "dojo/query", "dojo/NodeList-dom"], function(ready, on, domAttr, domStyle, query) {
    ready(function() {
        query("ul li a").forEach(function(node) {
            query(domAttr.get(node, "href")).forEach(function(node) {
                domStyle.set(node, "display", "none");    
            });

            on(node, "click", function(e) {
                query("ul li a").forEach(function(node) {
                    if (node == e.target) {
                        query(domAttr.get(node, "href")).forEach(function(node) {
                            domStyle.set(node, "display", "block");    
                        });
                    } else {
                        query(domAttr.get(node, "href")).forEach(function(node) {
                            domStyle.set(node, "display", "none");    
                        });
                    }
                });
            });
        });
    });
});

我不知道你是多么熟悉的道场,但它使用的查询,将循环在列表中所有链接(与dojo/querydojo/NodeList-dom模块)(你应该提供一个类名或类似的东西,使它更容易)。 然后,它会为每个链接,检索对应的div和隐藏它,它也将click事件处理程序(与连接到它dojo/on模块)。

当用户点击该链接,这将(再次)循环中的所有链接,但这次它这样做,以确定哪个节点是目标之一,这是不是(这样它可以隐藏/显示相应的div)。

我做了一个的jsfiddle向您展示这一点。 如果事情还不清楚,你应该先尝试一下参考指南道场的,因为它确实表明大多数模块的最常见的用途。

但由于这种行为是非常相似的TabContainer的,我建议你看看TabContainer的参考指南 。



文章来源: dojo: Show or hide divs based on selection in a list