Question

我正在尝试使用jquery显示和隐藏div内容，虽然我倾向于快速学习，但我对jquery只有一点了解。我正在尝试使用图像和链接来打开div，并将图像从+交换到 - 。我把图像作为一个包含+和 - 符号的文件，我可以使用CSS分割图像。现在的问题是，当我点击加号或链接时没有任何反应，它不会显示div。我有多个div。这是我到目前为止所做的。

<div class="topic">
<a href="#" class="article_toggle" onclick="article_toggle();" style="display: block; cursor: pointer;">bla bla bla</a>
        <div class="plusminus">
        <div class="plus" onclick="art_toggle();" style="display: block; cursor: pointer;">&nbsp;</div>
        <div class="minus" onclick="art_toggle();" style="display: none; cursor: pointer;">&nbsp;</div>
        </div>
</div>
<br />
<div class="section" style="display: none;">   // this is the div i want to show and hide.
    <table class="three-column">
    </table>
</div>

瞧不起我的错，我忘了在我的脚本中添加代码。

function article_toggle(show) {
var currentart = $(show + ' .article-arrow .article-plus').attr('style');
if(currentart.search('display: none;')==-1) {
    $(show + ' .article-arrow .article-minus').attr('style', 'display: none; cursor: pointer;');        
    $(show + ' .article-arrow .article-plus').attr('style', 'display: block; cursor: pointer;');        
    $(show + ' .faq-content .article-section').attr('style', 'display: none;');
    $(show).stop();
    $(show).css('backgroundColor', '#ffffff');
} else {
    $(show + ' .article-arrow .article-minus').attr('style', 'display: block; cursor: pointer;');       
    $(show + ' .article-arrow .article-plus').attr('style', 'display: none; cursor: pointer;');     
    $(show + ' .faq-content .article-section').attr('style', 'display: block;');
    $(show).css('backgroundColor', '#fff8de');
    $(show).css('backgroundColor', $(view).css('backgroundColor')).animate({
        backgroundColor: '#ffffff'
    }, 3000);
}

Answer 1

尝试此操作，即使您没有包含脚本

$(document).ready(function(){

    $('.article_toggle').click(function(){

         $('.section').toggle();
     }
);

JS Fiddle

Answer 2

这是我的建议

HTML：

<div class="topic">
    <a href="#" class="article_toggle" style="display: block; cursor: pointer;">bla bla bla</a>
    <div class="plusminus">
        <div class="plus article_toggle" style="display: block; cursor: pointer;">&nbsp;</div>
        <div class="minus article_toggle" style="display: none; cursor: pointer;">&nbsp;</div>
    </div>
</div>
<br />
<div class="section" id="section" style="display: none;">   // this is the div i want to show and hide.
    <table class="three-column">
    </table>
</div>

使用Javascript：

$(document).ready(function(){
    $('.article_toggle').click(function(){
        $('.section').toggle();
        $('.plusminus div').toggle();
    });
});

注意：

HTML和Javascript已经分开 - 所有点击事件都已从HTML中删除，并在页面加载时使用jQuery注册
类article_toggle也被添加到“plus”和“minus”图像中，以允许jQuery在其上添加点击事件
$('.section').toggle();代码显示/隐藏内容
$('.plusminus div').toggle();切换加号和减号按钮的可见性

jquery显示/隐藏div无法正常工作

2 个答案:

JS Fiddle