使用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引用http://tester.tritium.io/f15079e92fb4b53232bf4a94cceb1787f8012a33中删除内联属性http://tester.tritium.io/f15079e92fb4b53232bf4a94cceb1787f8012a33的“块”。