Question

我正在做一系列bios（团队成员），当点击bio时，使用jquery .hide（）和.show（）显示完整的bio。

这是完整的js小提琴 http://jsfiddle.net/s0sjqzba/

基本上每个＆＃34; Full Bio＆＃34;单击按钮有一个特定人的显示，然后隐藏任何其他显示隐藏。

我试过这段代码

$( ".biobutton" ).click(function() {
      $(this).addClass("close").parent("biobutton").next().show( "slow");
});

我的想法是，当点击按钮时，它将转到父div并找到下一个div（显示并显示它。）但它不起作用

这是html

<div class="row bio">
    <div class="medium-4 columns">
        <img src="http://placehold.it/450x390">
    </div>
    <div class="medium-8 columns">
        <h3>
            Dr. Len Futerman, DDS
        </h3>
        <h4>
            Subheadline lorem ipsum dolor sit amet
        </h4>
        <p>
            Positive copy about the individual’s involvement about your treatment. Example: All of yourprocedures have one thing in common: they’ll be performed safely, painlessly and quickly by Dr. Len Futerman— Hampton Roads’ only dental anasthesiologist.
        </p>

    </div>
    <div class="medium-12 columns"><a href="#" class="biobutton"> FULL BIOGRAPHY</a></div>
</div>
<div class="specialreveal" style="min-width:100%; background-color:#333">
<div class="row" >
        <div class="medium-12 columns">
        <div class="medium-6 columns">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.</div>
        <div class="medium-4 columns">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.</div>
    </div>
</div>
</div>



<div class="row bio">
    <div class="medium-4 columns">
        <img src="http://placehold.it/450x390">
    </div>
    <div class="medium-8 columns">
        <h3>
            Dr. Len Futerman, DDS
        </h3>
        <h4>
            Subheadline lorem ipsum dolor sit amet
        </h4>
        <p>
            Positive copy about the individual’s involvement about your treatment. Example: All of yourprocedures have one thing in common: they’ll be performed safely, painlessly and quickly by Dr. Len Futerman— Hampton Roads’ only dental anasthesiologist.
        </p>

    </div>
    <div class="medium-12 columns"><a href="#" class="biobutton"> FULL BIOGRAPHY</a></div>
</div>
<div class="specialreveal" style="min-width:100%; background-color:#333">
<div class="row" >
        <div class="medium-12 columns">
        <div class="medium-6 columns">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.</div>
        <div class="medium-4 columns">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.</div>
    </div>
</div>
</div>

Answer 1

您可以使用：

$(".specialreveal").hide();
$(".biobutton").click(function (e) {
    e.preventDefault(); //here use preventDefault to stop page scroll to the top
    $(".specialreveal").hide(); //add this line to hide other open cv
    $(this).parents("div.row").next().show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row bio">
    <div class="medium-4 columns">
        <img src="http://placehold.it/450x390">
    </div>
    <div class="medium-8 columns">
        	<h3>
			Dr. Len Futerman, DDS
		</h3>

        	<h4>
			Subheadline lorem ipsum dolor sit amet
		</h4>

        <p>Positive copy about the individual’s involvement about your treatment. Example: All of yourprocedures have one thing in common: they’ll be performed safely, painlessly and quickly by Dr. Len Futerman— Hampton Roads’ only dental anasthesiologist.</p>
    </div>
    <div class="medium-12 columns"><a href="#" class="biobutton"> FULL BIOGRAPHY</a>
    </div>
</div>
<div class="specialreveal" style="min-width:100%; background-color:#333">
    <div class="row">
        <div class="medium-12 columns">
            <div class="medium-6 columns">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.</div>
            <div class="medium-4 columns">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.</div>
        </div>
    </div>
</div>
<div class="row bio">
    <div class="medium-4 columns">
        <img src="http://placehold.it/450x390">
    </div>
    <div class="medium-8 columns">
        	<h3>
			Dr. Len Futerman, DDS
		</h3>

        	<h4>
			Subheadline lorem ipsum dolor sit amet
		</h4>

        <p>Positive copy about the individual’s involvement about your treatment. Example: All of yourprocedures have one thing in common: they’ll be performed safely, painlessly and quickly by Dr. Len Futerman— Hampton Roads’ only dental anasthesiologist.</p>
    </div>
    <div class="medium-12 columns"><a href="#" class="biobutton"> FULL BIOGRAPHY</a>
    </div>
</div>
<div class="specialreveal" style="min-width:100%; background-color:#333">
    <div class="row">
        <div class="medium-12 columns">
            <div class="medium-6 columns">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.</div>
            <div class="medium-4 columns">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.</div>
        </div>
    </div>
</div>

<强>参考

.parents()

.next()

Jquery使用.parent和.next时出现问题

1 个答案: