0

我很想在单击链接时显示/隐藏链接的内容。很像您在常见问题解答页面中看到的内容。基本上我想获取点击链接的 data-* 并显示它的内容。这就是我所做的，但它仍然不起作用:(。

我的html如下：

<ul>
    <li><a data-faq="1" href="#question"> + first question product?</a></li>
        <p  data-faq="1" class="hidden">my content</p>

    <li><a data-faq="2" href="#question">+ More lorem?</a></li>
        <p data-faq="2" class="hidden">my content</p>

</ul>​

和像这样的jquery：-

 $('.hidden').hide();
 $("#question").click(function(){

 var activeFaq = $(this).attr("data-faq");    

    //show the content of the active faq
    $(activeFaq).toggle();
return false;
});

​

这是小提琴：- http://jsfiddle.net/8EJDc/ 再次我想在切换点击时切换+到-，反之亦然

4

8 回答 8

5

编辑：更新小提琴

尝试这个 -

<ul>
    <li>
        <a data-faq="1" class="question"> <span>+</span> first question product?</a>
        <p data-faq="1" class="hidden">my content</p>
    </li>       
    <li>
        <a class="question"><span>+</span> More lorem?</a>
        <p class="hidden">my content</p>
    </li>   
</ul>

$('.hidden').hide();
$(".question").click(function(){
    var $this = $(this).find('span');
    $this.text($this.text() == '+' ? '-' : '+');  
    $(this).next('p').toggle();   
});
于 2012-08-10T06:47:27.630 回答
1

伙计，你走错路了。

如果 P 不在LI内，则不能在UL内有P。

您试图通过 $("#question") 的 ID 调用元素。但是你没有申报任何身份证。

我试图重写你的代码：

HTML

<ul>
    <li><a data-faq="1" href="#" class="question"> + first question product?</a>
    <p data-faq="1" class="answer">my content</p>
    </li>
    <li><a href="#" class="question">+ More lorem?</a>
        <p class="answer">my content</p>
    </li>
</ul>​

JS

$('.answer').hide();
$(".question").click(function(evt){
    evt.preventDefault();
    $(this).next(".answer").toggle();
});

我更改了一些类名以增加语义

于 2012-08-10T06:50:10.107 回答
1

更改 $('#question') 是指元素 id。

这可以工作：

$("a").click(function(e){

    e.preventDefault();

    $(this).parent().next('.hidden').toggle();

});
于 2012-08-10T06:51:03.887 回答
1

您的HTML应该如下所示，因为 aul只有li标签而不是任何其他标签。所以把你的<p>标签放在一个<li>标签里。

 <ul>
    <li>
        <a class="faq" href="#question"> <span class="symbol">+</span> first question product?</a>
        <p class="hidden">my content</p>
    </li>

    <li>
        <a class="faq" href="#question"><span class="symbol">+</span> More lorem?</a>
        <p class="hidden">my content</p>
    </li>            

</ul>​

和jQuery：

$('.hidden').hide();

$(".faq").click(function(event){    
    event.preventDefault();
    $(this).next('.hidden').toggle();

    // below Code will toggle 'plus' & `minus`
    if($(this).find('.symbol').html() == "+") {
         $(this).find('.symbol').html("-")
    } else {
         $(this).find('.symbol').html("+")    
    }

});

看演示

于 2012-08-10T06:53:23.663 回答
0

我在您的脚本中发现了很多错误。我修复了其中的大部分并试图实现您正在寻找的东西。

http://jsfiddle.net/vvJPU/1/

检查这个小提琴。

于 2012-08-10T06:48:37.423 回答
0

很难说出 data-faq 的用途，或者您是否需要它。

但这似乎做你想要的...... http://jsfiddle.net/vvJPU/3/

$('a.question').click(function(){
    $(this).next('.hidden').show();
    return false;
});
于 2012-08-10T06:49:20.700 回答
0

您使用的方法是错误的。您不应该使用其 href 属性调用锚的 jquery。它应该是类或 id 属性。另外，不要隐藏，而是使用 $().css() 。

<ul>
<li><a class="question" data-faq="1"  href="#question"> + first question product?</a></li>
    <p id="data-faq1" class="hidden">my content</p>

<li><a class="question" data-faq="2" href="#question">+ More lorem?</a></li>
    <p id="data-faq2" class="hidden">my content</p>

​</p>

--

$('.question').click(function(){
var paraId = "#data-faq" + $(this).attr("data-faq");

$(paraId).click.toggle(function () {
        $(this).css("display","none");
    }, function () {
        $(this).css("display","block");
});

});

于 2012-08-10T06:57:03.073 回答
0

我不知道我有没有你的问题。但基本上，我认为它已关闭。

这里的代码

<script>
    $(document).ready(
        function(){
            $(".hidden").hide();
            $("ul li a").click(function(){
                $(this).next().text($(this).attr("data-faq")).toggle();
            });
    }
    );
</script>

注意：<p>应该在里面<li>和旁边<a>

我认为您的 HTML 代码有问题。<p>我在外面注意到了<li>

data-faq 的内容将是<p>标签的内容

单击此处获取小提琴

于 2012-08-10T07:33:24.517 回答