0

簡単なFAQドロップダウンを作成しようとしていますが、何らかの理由で機能していません。見ていただけませんか。

みんなありがとう！

CSS

#faqs h3    { cursor:pointer; }
#faqs h3.active { color:#d74646; }
#faqs div { height:0; overflow:hidden; position:relative; }
#faqs div p { padding:0; margin-bottom:15px; }

JavaScript：

$(document).ready(function() {
    $('#faqs h3').each(function() {
        var tis = $(this), 
            state = false, 
            answer = tis.next('div')
                        .hide()
                        .css('height','auto')
                        .slideUp();

            tis.click(function() {
                state = !state;
                answer.slideToggle(state);
                tis.toggleClass('active',state);
            });
    });
});

HTML

<div id="faqs">
    <h3>This is question 1?</h3>
        <div>
            <p>This is the answer to question #1.</p>
        </div>
    <h3>This is question 2?</h3>
        <div>
            <p>This is the answer to question #2.</p>
        </div>
</div>
4

1 に答える 1

0

以下の関数は、必要なものに使用できます。

HTML

<div id="QA">
  <ul>
    <li>Question 1</li>
    <li>Answer 1</li>
    <li>Question 2</li>
    <li>Answer 2</li>
  </ul>
  <ul>
    <li>Question 3</li>
    <li>Answer 3</li>
    <li>Question 4</li>
    <li>Answer 4</li>
  </ul>

</div>

JavaScript: 

<script type="text/javascript">
    function toggle(tag) {
        var x=document.getElementsByName(tag)[0];
        var a = x.parentNode
        if (a.style.display=='block'){
            a.style.display='none'
        }else{
            a.style.display='block'     
        }
    }


    function init() {
        //this function will add show hide functionality to paired list items,
        //as long as the answer is a list item straight after the question list item.
        //You can also have as many separate lists as you want.
        //all lists must be contained within a div with id QA

        var obj = document.getElementById('QA');
        var elements = obj.getElementsByTagName('li');
               var index = 1 
        //add javascript to question elements
              //you could also add styling to question elements here
        for (var i=0; i < elements.length; i+=2){
            var element = elements[i]; 
            element.innerHTML = "<a href='javascript:toggle(" + index + ")'>" + element.innerHTML + "</a>"
            index = index + 1
        } 
        //add bookmark to answer elements and add styling
        var index = 1
        for (var i=1; i < elements.length; i+=2){
            var element = elements[i]; 
            element.innerHTML = "<a name='" + index + "' id='" + index + "'></a>" + element.innerHTML 
            index = index + 1
                 element.style.padding = '0px 0px 10px 20px' //add indent to answer
                       element.style.listStyleType = 'none' //remove bullet
            element.style.display = 'none' //hide answer element
        }       
     }


window.onload = init; 

</script>
于 2012-05-31T04:29:02.360 に答える