javascript - 使用 moovweb 转换类别下拉列表以切换

Question

我想将切换器添加到以下代码：

<div class="z100" id="category-sidebar">
    <h3 class="header">
        <a class="header" href="/shop/us/en/#">
        <span>The Latest</span>
        </a>
    </h3>   
    <ul class="show-more limit-10" style="display: block;">
        <li class=" first">
            <a href="/shop/us/en/mens/new-arrivals"><span>New Arrivals</span></a>
        </li>
    ......
    </ul>
    <h3 class="header">
        <a class="header" href="/shop/us/en/#">
        <span>The Latest</span>
        </a>
    </h3>   
    <ul class="show-more limit-10" style="display: block;">
        <li class=" first">
            <a href="/shop/us/en/mens/new-arrivals"><span>New Arrivals</span></a>
        </li>
    ......
    </ul>
    ......
</div>

我试过

$("./ul"){
    attribute("data-ur-toggler-component","content")
    attribute("data-ur-state","disabled")
    wrap("div",data-ur-set: "toggler",data-ur-state: "disabled"){
        insert_top("div",class:"cat-header",data-ur-toggler-component:"button",data-ur-state:"disabled"){
            move_here("../h3/a","top") {
                name("div");
                attribute("href","")
            }
        }
    }
}

但无法将切换器标题移动到正确的位置。

Answer 1

html() {
    $('//div[@class="z100"]') {
        attribute('data-ur-set','toggler')
        attribute('style','border: 1px red so;id;')
        $('//h3[@class="header"]') {
            name('div')
            attribute('data-ur-toggler-component','button')
        }
        $('//ul[@class="show-more limit-10"]') {
            name('div')
            attribute('data-ur-toggler-component','content')
            $('.//li') {
                name('div')
            }
        }
    }
}

还要在 sass 文件中编写以下代码

[data-ur-toggler-component="content"] {
  display: none;
  &[data-ur-state="enabled"] {
    display: block;
  }

并从 html 中删除内联属性 display="block" 参考http://tester.tritium.io/f15079e92fb4b53232bf4a94cceb1787f8012a33