Question

点击某些内容时，尝试显示一段文字。尝试用jquery做这个，但有问题。我是jquery的新手，所以任何帮助都将不胜感激。提前谢谢。

Html代码:(我希望＆＃39; VVVVVVVVVVVV＆＃39;成为我点击显示其他内容的项目）

<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>

Jquery代码：

<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');
});

Answer 2

绑定范围的点击事件以更改内容的可见性。

<强> HTML：

"query_string": 
 {
      "default_field": "source.*",
      "query": "foobar",
      "lenient": true

 }

<强> CSS：

<span id='v-btn'>VVVVVVVVVVVVVV</span>

<div class='sub-nav'>
    <p>all types of content in here</p>
</div>

<强> JS：

.sub-nav {
    display:none;
}

请参阅：http://jsfiddle.net/02bge9ch/1/

Answer 3

这是我设法弄清楚的解决方案由于我使用的是Angular，我不能使用jquery，所以这里是解决方案。

将此添加到我的payment-methods.js文件并从我的html页面中删除jquery：

'use strict';
var app = angular.module('myApp.payment-methods',[])

app.controller('PaymentMethodsCtrl' , [ '$scope','$http',function($scope, $http){
$scope.active = true;
$scope.showCardDetails = function() {
    $scope.active = !$scope.active;


}                  
}]);

我将其添加到我想要显示的内容中：

ng-class="{'sub-nav' : active}" class="card-details"

并将此行代码添加到我想要显示的项目中并隐藏内容：

<div class="col-sm-4"  align="center">
            <span ng-click="showCardDetails()" id="v-btn">V</span>
        </div>

使用Jquery创建下拉菜单（显示/隐藏项目）

3 个答案: