-1

jqueryトグルに関する問題があります。

スキルが含まれていないようです。

<section class="ResumeItem">
      <header class="ResumeContentTitle" id="ResumeKnowledgeHeader">
          <p>Professional Knowledge</p>
      </header>
      <section class="skills">
           <header>
               <h3>Strong Skills</h3>
           </header>
           <ul>
               <li>PHP</li>
               <li>jQuery</li>
               <li>SQL</li>
               <li>Ajax</li>
               <li>HTML</li>
               <li>CSS</li>
            </ul>
      </section>

      <section id="ResumeKnowledge" class="ResumeContentText">
            <ul>
               <li>PHP – Expert Strong level. Worked with this technology for over a year.</li>
            </ul>
      </section>
</section>

JavaScript：

$(function(){
   $('.ResumeContentTitle').click(function(){
      var id = $(this).attr('id').split('Header');
      $('#'+id[0]).toggle("slow");
   });
});

ここに例があります：http： //jsfiddle.net/ohadpartuck/R2cEd/

4

2 に答える 2

2

スキルを含めていないため、スキルは選択されていません。

ワーキングフィドルhttp://jsfiddle.net/swamimayank/ghQxp/ またはhttp://jsfiddle.net/swamimayank/hNKpq/

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

      $(".skills ,.ResumeContentText").toggle("slow");


   });
});
于 2012-09-25T12:37:52.210 に答える
0

あなたのコードは他のボックスに再利用されることを意図していると私は考えているので、他の答えは本当に役に立ちません。

私がやったことは、スキルセクションにIDを追加し、IDの最初の部分にJavaScriptに追加したことです。これは、クリックされたdivから取得されますが、最後にスキルという単語を追加しましただからそれも隠します。

HTML

<section class="ResumeItem">
                    <header class="ResumeContentTitle" id="ResumeKnowledgeHeader">
                        <p>Professional Knowledge</p>
                    </header>
                    <section class="skills" id="ResumeKnowledgeSkills">
                        <header>
                            <h3>Strong Skills</h3>
                        </header>
                        <ul>
                            <li>PHP</li>
                            <li>jQuery</li>
                            <li>SQL</li>
                            <li>Ajax</li>
                            <li>HTML</li>
                            <li>CSS</li>
                        </ul>
                    </section>

                    <section id="ResumeKnowledge" class="ResumeContentText">

                        <ul>
                            <li>PHP – Expert Strong level. Worked with this technology for over a year.</li>

                        </ul>
                    </section>
                </section>​

JavaScript

$(function(){
   $('.ResumeContentTitle').click(function(){
      var id = $(this).attr('id').split('Header');
      $('#'+id[0]).toggle("slow"); 
      $('#'+id[0]+'Skills').toggle("slow"); 
   });

});​

jsFiddle http://jsfiddle.net/R2cEd/10/

于 2012-09-25T13:02:27.617 に答える