在移動頁面上展開/折疊

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>