Question

我使用（样式化）Bootstrap标签

我想再次点击它时关闭Bootstrap标签。

部分工作，我可以关闭相应的面板但是当我想切换选项卡的“活动”类时，脚本不起作用。

我的JS代码：

$('[data-toggle=tab]').click(function(e){
    if($(this).parent().hasClass('active')){
        e.preventDefault();

        // toggle 'active' tab class (styling)
        $(this).parent().toggleClass('active');

        // toggle 'active' panel class (hide it)
        $($(this).attr("href")).toggleClass('active');
    }
})

此处显示所有代码（html，css，js）：https://jsfiddle.net/j9stkqf6/1/

如果你发表评论：

$(this).parent().toggleClass('active');

隐藏面板

我也尝试过步/步调试模式一切正常，直到JS函数结束，都重新出现（tab.active类和面板）

再次点击标签时，您能否帮我关闭面板和切换标签'有效'课程。

谢谢！

Answer 1

最后我开始工作了：

我必须添加＆＃39; e.stopPropagation（）＆＃39;我的Javascript以及＆＃39; e.preventDefault（）＆＃39;

＆＃39; e.preventDefault（）＆＃39;停止Bootstrap对该事件的操作（单击A链接）

＆＃39; e.stopPropagation（）＆＃39;避免Bootstrap的其他操作（抓住点击LI）

比照e.preventDefault() vs e.stopPropagation()

@Override

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_dobeyti);
   final TextView tView;
    Button mButton;

    tView = (TextView)findViewById(R.id.textView1);
    mButton = (Button)findViewById(R.id.button);
    assert mButton != null;
    mButton.setOnClickListener(new View.OnClickListener() {


        @Override
        public void onClick(View v) {
            int num = 0;
            num++;


           tView.setText(Integer.toString(num));
        }
    });

    }
}

您可以在此处查看我的工作示例：https://jsfiddle.net/j9stkqf6/10/

Answer 2

这是附带的演示，可以帮助你

方法1

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-info">
        <div class="panel-heading " role="tab" id="headingOne">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#per" aria-expanded="true" aria-controls="collapseOne">
                    <span class="glyphicon glyphicon-option-vertical"></span> <strong>Link 1</strong>
                </a>
            </h4>
        </div>
        <!--To make by defualt open a any panel put class "in" (without quotes)-->
        <div id="per" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
                Link 1    Link 1    Link 1    Link 1    Link 1    Link 1
            </div>
        </div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading" role="tab" id="headingTwo">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#family" aria-expanded="false" aria-controls="collapseTwo">
                    <span class="glyphicon glyphicon-option-vertical"></span> <strong>Link 2</strong>
                </a>
            </h4>
        </div>
        <div id="family" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
            <div class="panel-body">
                Link 2  Link 2  Link 2  Link 2  Link 2  Link 2
            </div>
        </div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading" role="tab" id="headingThree">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#social" aria-expanded="false" aria-controls="collapseThree">
                    <span class="glyphicon glyphicon-option-vertical"></span> <strong>Link 3</strong>
                </a>
            </h4>
        </div>
        <div id="social" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
            <div class="panel-body">
                Link 3  Link 3  Link 3  Link 3 Link 3   Link 3  Link 3
            </div>
        </div>
    </div>
</div>

方法2

要折叠在一起你也可以使用类似的东西，你可以折叠所有具有“in”类的导航，因为打开的可折叠已经添加了类“in”。你可以使用下面的脚本来捕获它们。关闭那些。

 $('#accordion .collapse').on('show.bs.collapse', function (e) {
        $('#accordion .in').collapse('hide');
    });

折叠引导选项卡 - 无法切换.active选项卡类

2 个答案: