Question

我发生了一件奇怪的事情。

我有一个页面，上面有几个项目，每个都有一个iconfont。单击图标时，它会更改图标，并在其下方显示新的

元素。当然，相反的情况发生，再次点击更改图标并隐藏它。这很有效。

但是，当我尝试将其设置为移动版本（称为“模态”）（并且它是一种模态）时，展开/折叠不起作用。单击按钮时会出现主模式，因此这不是问题。我正在为iPhone 5使用Chrome模拟器。调用相同的功能，我已经验证它找到了该功能，但它不会扩展（所以我也无法测试崩溃）。

这是基本的HTML：

        <p><span id="CraveTV" class="featureToggle plus-fa"></span> CraveTV </p>
        <p id="CraveTV_list" class="goApps">Stream Showtime hits, HBO classics, the best sitcoms in TV history, and CraveTV originals.  Available on <a href="">iOS</a> or <a href="">Android</a>.</p>

css：

.plus-fa {
    &:before {
        @include icon($icon-plus-fa);
        color: #0056A7;
    }
}
.minus-fa {
    &:before {
        @include icon($icon-minus-fa);
        color: #0056A7;
    }
}
.goApps {
    display:none;
    padding-bottom: 10px;
}

和jquery函数：

$(document).ready(function(){
    $(".featureToggle").click(function(){
        var togglelist = "#" + $( this ).attr('id') + '_list';
        $(togglelist).toggle();
        $( this ).toggleClass('plus-fa');
        $( this ).toggleClass('minus-fa');
    });
 });

在桌面版和移动版上使用的代码完全相同，尽管它们是针对桌面版和移动版指定的不同scss文件。

任何人都可以帮我弄清楚它为什么不起作用？我想知道这是一个“模态”限制，还是我想念的简单。

Answer 1

将＃inside放在href

中

<p><span id="CraveTV" class="featureToggle plus-fa"></span> CraveTV </p>
<p id="CraveTV_list" class="goApps">Stream Showtime hits, HBO classics, the best sitcoms in TV history, and CraveTV originals.  Available on <a href="#">iOS</a> or <a href="#">Android</a>.</p>

在移动页面上展开/折叠

1 个答案: