在移动页面上展开/折叠

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

将＃放入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>