javascript - 在移动页面上展开/折叠

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>