jquery切换可见性

jquery toggle visibility

本文关键字：可见性 jquery      更新时间：2023-09-26

当点击链接时，我正在烦恼地显示/隐藏链接的内容。 与您在常见问题解答页面中看到的非常相似。基本上，我想获取点击链接的数据*并显示其内容。这就是我所做的，但它仍然不起作用:(。

我的网页如下：

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

编辑：更新的小提琴

试试这个—— 

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

伙计，你走错了路。

如果 UL 中没有 P，则不能在 LIN 中具有 P。

您尝试使用 $（"#question"） 通过元素的 ID 调用元素。但是你没有声明任何ID。

我试图重写你的代码：

.HTML

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

.JS

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

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

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

这可以工作：

$("a").click(function(e){
    e.preventDefault();
    $(this).parent().next('.hidden').toggle();
});

您的 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("+")    
    }
});

查看演示

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

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

检查这个小提琴。

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

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

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

您使用的方法错误。 你不应该使用锚点的 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>

​

--

$('.question').click(function(){
var paraId = "#data-faq" + $(this).attr("data-faq");
$(paraId).click.toggle(function () {
        $(this).css("display","none");
    }, function () {
        $(this).css("display","block");
});

}）;

我不知道我是否得到了你的问题。 但基本上，我认为它是封闭的。

这里的代码

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

数据常见问题解答的内容将是<p>标签的内容

点击这里看小提琴

相关文章：