0

リンクをクリックしたときに、リンクのコンテンツを表示/非表示にするのが面倒です。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/+もう一度、トグルクリック時ににトグルし たいと思います。-その逆も同様です。

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

男、あなたはとても間違った道を進んでいました。

LI内にない場合、 UL内にPを含めることはできません。

$（ "＃question"）を使用してIDで要素を呼び出そうとしました。しかし、あなたは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は次のようになります。したがって、タグをタグ内に保持します。ulli<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を呼び出さないでください。classまたはidattribのいずれかである必要があります。また、非表示にする代わりに、$（）。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 に答える