자바 스크립트를 사용하여 CSS 업데이트

-4

다음 Javascript를 사용하여 FAQ 스타일 페이지의 div 블록을 열고 닫습니다. 아래에 자식 div가있는 경우에만 LI가 커서 : 포인터를 표시하도록하려고합니다.자바 스크립트를 사용하여 CSS 업데이트

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#faqs li').each(function() { 
      var tis = $(this), 
      state = false, 
      answerNext = tis.next('div').hide().css('height','auto').slideUp(); 
      answerAll = $('#faqs').children('div').hide().css('height','auto').slideUp(); 
      tis.click(function() { 
       state = !state; 
       answerAll.slideUp(state); 
       $('#faqs').children('li').removeClass('active'); 
       answerNext.slideToggle(state); 
       tis.addClass('active',state); 
      }); 
     }); 
    }); 
</script>

커서에 대한 클래스를 추가하려면 어떻게합니까? LI에 대한 포인터는 자식 div가있는 경우에만 사용할 수 있습니까? 여기

내가 사용하고있어 HTML입니다 :

<div id="faqs"> 
<ul class="servicelist"> 
<div class="servicelisttitle">List Title</div> 
<li>List Item Without Div</li> 
<li>List Item WITH Div</li> 
<div>This will open when above LI is clicked</div> 
<li>List Item Without Div</li> 
</ul>

출처

2014-11-13 Rick Freeman

몇 가지 샘플 HTML을 표시 할 수 있습니까? 당신은 자식'div' 요소에 대해 이야기하고 있지만, 코드는 형제를 참조하고 있습니다 (next()를 통해). –

글쎄, 여기에있는 것과 같은 방식으로 CSS의 커서 속성을 철자하면, 우리가 말한 것과 상관없이 아무 것도하지 않을 것입니다. –

고마워, 찰스! 커피 한 잔 더주세요 ... –

당신은 많은 코드를 표시하지 않습니다,하지만 당신은

<ul id="faqs"> 
    <li>No child</li> 
    <li>Child<div>Something</div></li> 
    <li>Still no child</li> 
    <li>With Child<div>Something else</div></li> 
</ul>

같은이있는 경우 그냥 모든 자식 된 div를 선택할 수 있습니다, 다음 (div 자녀와 함께 li의) 부모를 취할 :

$('#faqs > li > div').parent().css('cursor','pointer');

Here's a jsfiddle.

출처

2014-11-13 17:40:31 kba

"어린이"를 클릭 할 때까지 "SOME"을 숨겨두고 있습니다. –

jQuery는 요소가 숨겨진 경우에도 요소를 선택할 수 있으므로 중요하지 않습니다. 여전히 작동 할 것입니다. – kba

내 HTML의 DIV가 LI 외부에 있습니다. 코드가 여전히 작동해야합니까? –

자바 스크립트를 사용하여 CSS 업데이트

답변

관련 문제