Question

我想扩展.neo_accord_content_upon点击一个名为.neo_expand_button的按钮。我找到了几个解决方案，但似乎没有一个解决方案

这是我的HTML：

 <body>
 <div id="neo_wrapper"> <!-- Wrapper start -->
<div id="neo_container">    <!-- Container start -->
    <div id="neo_header">   <!-- Header start -->
        <div class="neo_logo">
            <img src="http://fpoimagery.com/?t=px&w=200&h=100&bg=0ff&fg=000000" />
        </div>
        <div id="neo_main_nav"> <!-- Main navigation -->
            <ul>
                <li>About Us</li>
                <li>Services</li>
                <li>Portfolio</li>
                <li>Brokerage</li>
                <li>Tenant Portal</li>
            </ul>
        </div>  <!-- Main navigation end -->
    </div>  <!-- Header end -->
    <div id="neo_home_image">
    </div>
    <div id="neo_about_section">
        <div class="text_container">
            <h1>About the Grossman Companies</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="about_button">
            <p>Read More</p>
        </div>
    </div>  <!-- About section end -->
    <div id="neo_accord_section">   <!-- Accord section start -->
        <div class="neo_accord">
            <div class="neo_accord_header">
                <h1 class="neo_accord_headertext">Acquisitions</h1>
                <div class="neo_expand_button">
                    <p>Expand</p>
                </div>
            </div>
            <div class="neo_accord_content">
                <div class="text_container">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
            </div>
        </div>
        <!--<div class="neo_accord">    
            <div class="neo_accord_header">
                <h1 class="neo_accord_headertext">Private Lending</h1>
                <div class="neo_expand_button">
                    <p>Expand</p>
                </div>
            </div>
             <div class="neo_accord_content">
            </div>
        </div>-->
         <!--<div class="neo_accord">
            <div class="neo_accord_header">
                <h1 class="neo_accord_headertext">Private Lending</h1>
                <div class="neo_expand_button">
                    <p>Expand</p>
                </div>
            </div>
             <div class="neo_accord_content">
            </div>
        </div>
         <div class="neo_accord">
            <div class="neo_accord_header">
                <h1 class="neo_accord_headertext">Private Lending</h1>
                <div class="neo_expand_button">
                    <p>Expand</p>
                </div>
            </div>
             <div class="neo_accord_content">
            </div>
        </div>-->
    </div>  <!-- Accord section end -->
</div>  <!-- Container end -->
 </div> <!-- Wrapper end -->
 </body>

我的SASS：

body, html { 
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}

#neo_wrapper {  /* Wrapper for entire page */
width: 100%;
height: 1800px;
margin: 0 auto;
background-color:#333;

#neo_container {    /* Main content container */
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background:#999999;

    #neo_header {   /* Header for logo, navigation */
        width: 100%;
        height: 100px;
        background-color:#666666;

        .neo_logo { /* Grossman logo */
            float: left;
            width: 200px;
            height: 100px;
        }

        #neo_main_nav { /* Main navigation */
            float: left;
            margin: 55px 0 0 500px;

            ul {list-style: none; padding-left: none; color: #FFF; font-size: 18px;}
            li {
                float: left; margin: 10px;
                a {
                    /* Formatting for list items */
                    &:link {text-decoration: none; color: #FFFFFF;}
                    &:hover {color: #CCC; background-color: #333;}
                    &:active {color: #222; background-color: #222;}
                    &:visited {text-decoration:none; color: #FFF; background-color: #222;}
                }
            }
        }   /* Nav end */
    }   /* Header end */

    .text_container {   /* Container for centered text */
        width: 500px;
        text-align: center;
        color:#000;
        margin: 0 auto;
    }

    #neo_home_image {   /* Fullbleed image */
        width: 100%;
        height: 400px;
    }

    #neo_about_section {    /* About section */
        width: 100%;
        height: 200px;
        background: #FFF;

        .about_button {
            width: 150px;
            height: 35px;
            background-color:#222;
            color: #FFF;
            text-align: center;
            line-height: 35px;
            margin: 0 auto;
            margin-top: 15px;
            cursor: pointer;
            display: table;
        }
    } /* About section end */

    #neo_accord_section {
        width: 100%;
        height: 700px;

        .neo_accord {   /* Drop down sections */
            width: 100%;
            height: 100px;
            background: #222;
            border: solid #FFF 1px;

            .neo_accord_header {    /* Header area in accordion section */
                width: 100%;
                height: 100px;
                background: #222;

                h1.neo_accord_headertext {
                    margin: 0 auto;
                    text-align: center;
                    font-size:24px;
                    color: #FFF;
                }

                .neo_expand_button {
                    width: 200px;
                    height: 35px;
                    background:#F00;
                    line-height: 35px;
                    text-align: center;
                    color: #FFF;
                    display: table;
                    cursor: pointer;
                    margin: 0 auto;
                    margin-top: 15px; 
                }
            }   /* End accordion header */

            .neo_accord_content {
                display: none;              
                background:#CCC;
                color: #000;
                width: 100%;
                height: 150px;
                margin: 0 auto;
            }
        }   /* Accord container end */
    }   /* Accord section end */

}   /* Container end */
}   /* Wrappper end */

和JQuery：

// JavaScript Document
$(document).ready(function () {;
$("#neo_home_image").backstretch("http://fpoimagery.com/?t=px&w=960&h=400&bg=0ff&fg=000000 ");

$(".neo_expand_button").click(function () {
    $(this).find('.neo_accord_content').slideToggle("slow");
    //alert ("hello");
});
});

这是我的jsFiddle：http://jsfiddle.net/6brxu/

Answer 1

http://jsfiddle.net/6brxu/2/

$(document).ready(function () {;

    $(".neo_expand_button").click(function (e) {
        e.preventDefault();

        $('.neo_accord_content').slideToggle("slow");
    });
});

您之前的Javascript正在搜索课程＆＃34; .neo_accord_content＆＃34;使用＆＃34; .neo_expand_button＆＃34;。我将其更改为搜索该类的页面。

使用jQuery扩展Div

1 个答案: