jquery - 使用 Jquery 创建下拉菜单(显示/隐藏元素)

Question

尝试在我单击某些内容时显示一段文本。尝试使用 jquery 执行此操作，但遇到问题。我是 jquery 的新手，所以我们将不胜感激。提前致谢。

HTML 代码:(我希望“VVVVVVVVVVVV”成为我单击以显示其他内容的元素)

<div class="row" align="center">
    <div class="col-sm-4" align="center">
        <span>
            <h6 class="payment-item-title">VISA ending in 5555</h6>
        </span>
    </div>

    <div class="col-sm-4" align="center">
        <span>
            <h6 class="payment-item-title">12/2017</h6>
        </span>
    </div>

    <div class="col-sm-4"  align="center">
        <span id="v-btn">
            <h6>
                <b>VVVVVVVVVVVV</b>
            </h6>
        </span>
    </div>
</div>

HTML 代码(我希望通过点击显示):

<div align="center" id="content-content" class="sub-nav" style="background-color: #939393">
    <div class="row" align="center">

        <div class="col-sm-4" align="right">
            <span>
                <h6 class="payment-section-header-title">name on card</h6>
            </span>
        </div>

        <div class="col-sm-4" align="right">
            <span>
                <h6 class="payment-section-header-title">billing address</h6>
            </span>
        </div>
    </div>
    <div class="row" align="center">
        <div class="col-sm-6" align="center">
            <span>
                <h6 class="payment-item-title">Jonny Smith</h6>
            </span>
        </div>

        <div class="col-sm-6" align="left">
                <span>
                    <h6 class="payment-item-title">
                        Jonny Smith
                        <br />
                        123 Fake Street
                        <br />
                        Township, NJ
                        <br />
                        201-555-5554
                    </h6>
                </span>
        </div>
        <div class="col-sm-5" align="center">
            <h6>
                <button type="button" align="center">Edit</button>
            </h6>
        </div>
        <div class="col-sm-1" align="center">
            <h6>
                <button type="button" align="center">Delete</button>
            </h6>
        </div>
    </div>
</div>

J查询代码:

<script>
$(document).ready(function() {
    $('#v-btn').click(function() {
        alert("im here");
        $('.sub-nav').toggleClass('visible');
    });
});
</script>

在顶部设置:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

这是该过程的一些 CSS:

#content-content.sub-nav{
    display: none;
}


#content-content.visible {
    display: block;
}

Answer 1

$('#v-btn').click(function() {            
    var $elem = $(this).find('h6 > b');
    $elem.text(); // will be VVVVVV
    alert("im here");
    $('.sub-nav').toggleClass('visible');
});