布尔玛卡的简单 jQuery 切换不起作用
Simple jQuery toggle with bulma card not working
我有一张小布尔玛卡。我试图显示它,当我点击图标时:
<div class="card">
<header class="card-header">
<p class="card-header-title">
Component
</p>
<a href="#" class="card-header-icon" aria-label="more options" id="server">
<span class="icon">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</a>
</header>
<div class="card-content is-hidden" id="server-content">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
<a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
<br>
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
</div>
</div>
</div>
这个我试过了:
$(document).ready(function() {
$("#server").click(function() {
$("#server-content").toggle();
});
});
但是没有用。在我的 HTML 脑袋中,我这样做:
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
在 main.js 文件中是上面的代码片段。
当我在 jquery 函数中放入警告时,它会弹出,但内容仍然隐藏。
您只需要使用 jQuery 的 toggleClass 函数而不是切换。 bulma 中的 is-hidden class 将隐藏它所应用的 div。请查看https://jsfiddle.net/rutsxz91/3/
$(document).ready(function() {
$("#server").click(function() {
$("#server-content").toggleClass('is-hidden');
});
});
我有一张小布尔玛卡。我试图显示它,当我点击图标时:
<div class="card">
<header class="card-header">
<p class="card-header-title">
Component
</p>
<a href="#" class="card-header-icon" aria-label="more options" id="server">
<span class="icon">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</a>
</header>
<div class="card-content is-hidden" id="server-content">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
<a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
<br>
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
</div>
</div>
</div>
这个我试过了:
$(document).ready(function() {
$("#server").click(function() {
$("#server-content").toggle();
});
});
但是没有用。在我的 HTML 脑袋中,我这样做:
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
在 main.js 文件中是上面的代码片段。 当我在 jquery 函数中放入警告时,它会弹出,但内容仍然隐藏。
您只需要使用 jQuery 的 toggleClass 函数而不是切换。 bulma 中的 is-hidden class 将隐藏它所应用的 div。请查看https://jsfiddle.net/rutsxz91/3/
$(document).ready(function() {
$("#server").click(function() {
$("#server-content").toggleClass('is-hidden');
});
});