Question

我有一个包含多个ul列表的网页。每个ul列表都被div包围，类.content。

我想要做的是，.content DIV的高度在点击li内的相应ul时显示。

我的分钟代码只设置页面上第一个content DIV的高度。

HTML：

<ul class="myList">
    <li>
        <div class="heading">
            <a>Menu 1</a>
        </div>
        <div class="content">
                <h2>Menu 1</h2>
            <ul class="show-hide">
                <li>
                    <a href="">How to reach us</a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
                <li>
                    <a href="">How to email us</a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
                <li>
                    <a href="">Contact Number</a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
            </ul>
        </div>
    </li>
    <li>
        <div class="heading">
            <a>Menu 2</a>
        </div>
        <div class="content">
                <h2>Menu 2</h2>
            <ul class="show-hide">
                <li>
                    <a href="">How to reach us</a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
            </ul>
        </div>
    </li>
    <li>
        <div class="heading">
            <a>Menu 3</a>
        </div>
        <div class="content">
                <h2>Menu 3</h2>
            <ul class="show-hide">
                <li>
                    <a href="">How to reach us</a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
                <li>
                    <a href="">How to email us</a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
                <li>
                    <a href="">Contact Number</a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
                <li>
                    <a href="">How to email us</a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
                <li>
                    <a href="">Contact Number</a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
            </ul>
        </div>
    </li>
</ul>

jQuery的：

$('.show-hide').on('click', function () {

    getHeight = $('.content').height();

    alert(getHeight);

    return false;
});

我的小提琴：http://jsfiddle.net/oampz/BK7yw/

任何帮助表示赞赏

Answer 1

使用parents()或parent()

   $('.show-hide').on('click', function () {

        getHeight = $(this).parents('.content').height();

        alert(getHeight);

        return false;
    });

Answer 2

尝试将jQuery#closest()用作：$(this).closest('.content').height();

<强> JsFiddle Link

Answer 3

您刚刚选择了类名为content的所有元素。但您的要求是在单击元素的上下文中选择具有类content的元素。所以你必须首先选择$(this)引用，然后尝试使用.closest()找到与提供的选择器最接近的元素，

$('.show-hide').on('click', function () {
    getHeight = $(this).closest('.content').height(); 
    alert(getHeight);
    return false;
});

Answer 4

使用 .parents（） api https://api.jquery.com/parents/

 getHeight = $(this).parents('.content').height();

捕获父DIV的高度

4 个答案: