Question

我在点击时显示/隐藏链接的内容。很像你在FAQ页面中看到的内容。基本上我想得到点击链接的数据 - *并显示它的内容。这就是我所做的，但它仍然不起作用：（。

我的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/ 再次，我想在切换点击时切换+到-，反之亦然

Answer 1

编辑：Updated Fiddle

试试这个 -

<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();   
});

Answer 2

伙计，你是错误的。

如果不在 LI 中，则中。

你试图用$（“＃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();
});

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

Answer 3

更改$（'＃question'）是指元素ID。

这可行：

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

    e.preventDefault();

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

});

Answer 4

您的 HTML 应该如下所示，因为ul只有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("+")    
    }

});

SEE DEMO

Answer 5

我在你的脚本中发现了很多错误。我修复了大部分内容并试图实现你想要的东西。

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

检查这个小提琴。

Answer 6

很难说出数据常见问题的用途，或者您是否需要它。

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

$('a.question').click(function(){
    $(this).next('.hidden').show();
    return false;
});

Answer 7

您使用的方法是错误的。你不应该使用它的href属性来调用锚的jquery。它应该是class或id attrib。另外，使用$（）。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>

-

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

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

}）;

Answer 8

我不知道我有什么问题。但基本上，我认为它是封闭的。

这里是代码

<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>标记

的内容

Click here for the fiddle

jquery切换可见性

8 个答案:

SEE DEMO