Jquery 尝试通过单击按钮使面板消失_Jquery_Twitter Bootstrap

Jquery 尝试通过单击按钮使面板消失

jquery twitter-bootstrap

Jquery 尝试通过单击按钮使面板消失,jquery,twitter-bootstrap,Jquery,Twitter Bootstrap,我正在学习本教程，但我使用的是jQuery和Bootstrap，而不是我认为作者使用的jQuery mobile？无论如何，我都不能让它工作。当用户单击Btn1时，我希望panel1消失。单击Btn2会导致panel2消失，依此类推。有人能帮我找出哪里出了问题吗？多谢各位 HTML <div class="container"> <!-- Provides extra visual weight and identifies the primary action in

我正在学习本教程，但我使用的是jQuery和Bootstrap，而不是我认为作者使用的jQuery mobile？无论如何，我都不能让它工作。

当用户单击Btn1时，我希望panel1消失。单击Btn2会导致panel2消失，依此类推。有人能帮我找出哪里出了问题吗？多谢各位

HTML

<div class="container">
  <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary" myPanel="panel1">Btn 1</button>

<!-- Secondary, outline button -->
<button type="button" class="btn btn-secondary" myPanel="panel2">Btn 2</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success" myPanel="panel3">Btn 3</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info" myPanel="panel4">Btn 4</button>

</div>

<div class="container">
    <div class="row">
        <div class="col-xs-3" id="panel1">
            first panel
        </div>
        <div class="col-xs-3" id="panel2">
            second panel
        </div>
        <div class="col-xs-3" id="panel3">
            third panel
        </div>
        <div class="col-xs-3" id="panel4">
            fourth panel
        </div>
    </div> <!--/.row-->
</div> <!--/.container-->

您将变量名错误

var panelID

用作

panelID

$(".btn").click(function(){
    var panelID = $(this).attr('myPanel');
    $('#' + panelID).toggle();
});

$（文档）.ready（函数（）{
$（“.btn”）。单击（函数（）{
var panelID=$（this.attr（'myPanel'）；
$（'#'+panelID）.toggle（）；
});
});

Btn 1
Btn 2
Btn 3
Btn 4
第一小组
第二小组
第三小组
第四小组

$（文档）.ready（函数（）{
//调用了.ready（）的处理程序。
$（“.btn”）。每个（函数（索引）{
$（此）。在（“单击”，函数（）上）{
var panelID=$（this.attr（'data-panel'）；
$（'#'+panelID）.hide（）；
});
});
}); 
Btn 1
Btn 2
Btn 3
Btn 4
第一小组
第二小组
第三小组
第四小组

请尝试此代码
$(".btn").click(function(){
    var panelID = $(this).attr('myPanel');
    $('#' + panelID).toggle();
});

<html>
    <head>
    <title></title>  
    <script src="js/jquery-1.10.2.min.js"></script>
        <script type="text/javascript">
        $( document ).ready(function() {
          // Handler for .ready() called.
            $( ".btn" ).each(function(index) { 
                $(this).on("click", function(){
                     var panelID = $(this).attr('data-panel'); 
                    $('#'+panelID).hide();
                });
            });
        }); 
        </script>
    </head>
    <body>
        <div class="container">
            <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
            <button type="button" class="btn btn-primary" data-panel="panel1" onclick="click();">Btn 1</button> 
            <!-- Secondary, outline button -->
            <button type="button" class="btn btn-secondary" data-panel="panel2">Btn 2</button> 
            <!-- Indicates a successful or positive action -->
            <button type="button" class="btn btn-success" data-panel="panel3">Btn 3</button> 
            <!-- Contextual button for informational alert messages -->
            <button type="button" class="btn btn-info" data-panel="panel4">Btn 4</button> 
        </div> 
            <div class="container">
                <div class="row">
                    <div class="col-xs-3" id="panel1">  first panel  </div>
                    <div class="col-xs-3" id="panel2">  second panel </div>
                    <div class="col-xs-3" id="panel3">   third panel </div>
                    <div class="col-xs-3" id="panel4">   fourth panel </div>
                </div> <!--/.row-->
            </div> <!--/.container-->
    </body>
</html>