0

我正在尝试使用 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);
}
4

2 回答 2

1

试试这个，即使你没有包含你的脚本

$(document).ready(function(){

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

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

JS小提琴

于 2012-10-25T15:23:59.143 回答
0

这是我的建议

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 也被添加到“加号”和“减号”图像中，以允许 jQuery 也可以在它们上添加点击事件
  • 代码显示$('.section').toggle();/隐藏内容
  • $('.plusminus div').toggle();切换加号和减号按钮的可见性
于 2012-10-25T15:32:59.907 回答