我发生了一件奇怪的事情。
我有一个页面,上面有几个元素,每个元素都有一个 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文件中,分别为桌面版和移动版指定。
谁能帮我弄清楚为什么它不起作用?我想知道这是“模态”限制,还是我缺少的简单内容。
最佳答案
把#放在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>
关于javascript - 在移动页面上展开/折叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48193161/