使用 moovweb 转换类别下拉列表以切换答案

【问题标题】：transform category drop-down to toggle using moovweb使用 moovweb 转换类别下拉列表以切换
【发布时间】：2014-06-11 13:34:00
【问题描述】：

我想在以下代码中添加切换器：

<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","")
            }
        }
    }
}

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

【问题讨论】：

@Oleg Etsekhin：对恢复感到困惑
这不是一个还原而是半自动的“改进”动作。我不知道为什么您最初的大部分改进都丢失了，我现在会修复它。

标签： javascript html moovweb tritium

【解决方案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

【讨论】：