bootstrap dropdown side menu works only once

Question

... and menu item stays active. But from beginning: I have a site with a responsive top menu with bootstrap (works, after minimize menu toogle to dropdown button) and a side menu as nav-pills, which choose the tab-pane. Due to keep responsive I use CSS (xs-toogle and xs-collapse) to hide the side menu after minimum width and show a button as a dropdown. Here the relevant code:

   <div class="container-fluid">
     <div class="row">
       <div class="col-xs-1 col-sm-3">
                <div class="dropdown">
                    <!-- show after >=768 width -->
                    <button type="button" class="btn btn-default dropdown-toggle xs-toggle" id="dropmenu" data-toggle="dropdown">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>   
                    <ul class="nav nav-pills nav-stacked dropdown-menu" role="menu" aria-labelledby="dropmenu" aria-haspopup="true" aria-expanded="false">
                        <li class="nav-item" role="presentation"><a role="menuitem" class="dropdown-item nav-link" tabindex="-1" href="#goitem1" data-toggle="pill">Item1</a></li>
                        <li class="nav-item" role="presentation"><a role="menuitem" class="dropdown-item nav-link" tabindex="-1" href="#goitem2" data-toggle="pill">Item2</a></li>
                        <li class="nav-item" role="presentation"><a role="menuitem" class="dropdown-item nav-link" tabindex="-1" href="#goitem3" data-toggle="pill">Item3</a></li>
                    </ul>
                    <!-- hide after <768 width -->
                    <ul class="nav nav-pills nav-stacked xs-collapse" id="TabItems">
                        <li class="active"><a href="#goitem1" data-toggle="pill">Item1</a></li>
                        <li><a href="#goitem2" data-toggle="pill">Item2</a></li>
                        <li><a href="#goitem3" data-toggle="pill">Item3</a></li>
                    </ul>
                </div> <!-- dropdown -->
            </div> <!-- col -->
            <div class="col-xs-10 col-sm-7">
                <div class="maincontent">
                  <div class="tab-content">
                    <div class="tab-pane active fade in" id="goitem1">
                        <div class="row">
                            <div class="col-xs-12 col-sm-6">
                                <h1 class="flyer">CONTENT</h1>
                            </div> <!-- col -->
                            <div class="col-xs-0 col-sm-6 deco">
                                <h1 class="flyer">CONTENT</h1>
                            </div>
                        </div> <!-- row -->
                    </div> <!-- tab-pane -->
                    <div class="tab-pane fade" id="goitem2">
                        <div class="row">
                            <div class="col-xs-12 col-sm-6">
                                <h1 class="flyer">CONTENT</h1>
                            </div>
                            <div class="col-xs-0 col-sm-6 deco">
                                <h1 class="flyer">CONTENT</h1>
                            </div>
                        </div> <!-- row -->
                    </div> <!-- tab-pane -->
                    <div class="tab-pane fade" id="goitem3">
                        <div class="row">
                            <div class="col-xs-12 col-sm-6">
                                <h1 class="flyer">CONTENT</h1>
                            </div>
                            <div class="col-xs-0 col-sm-6 deco">
                                <h1 class="flyer">CONTENT</h1>
                            </div>
                        </div> <!-- row -->
                    </div> <!-- tab-pane -->
                  </div> <!-- tab-content -->
                </div> <!-- maincontent -->
            </div> <!-- col -->
        </div> <!-- row -->
      </div> <!-- container -->

Everything seems fine, after minimizing the window the nav-pills menu dispappear and the button for dropdown appears. I can press the button, the dropdown appears, I can click a menu entry and the itemsection will be displayed. But I can only click every menu item only once. The item in the dropdown stays active and no more action is possible with these items. Due to my weakness with Javascript I use only bootstrap with html and css and I have no more idea what is going wrong. Thank you in advance for giving me hints to solve the problem and get a better understanding what happen in background. Best Regards, Ralf

I added the CSS:

/* Seitenmenu Angebote*/
/* +++ HAUPTSEITE +++ */
.maincontent{
    background-color: #ffffff;
color: #000;
    opacity: 0.9;
    padding: 5%;
    border: 10px outset #d22814;
}

.xs-collapse {
  display: none;
  visibility: hidden;
}

.xs-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
}
.xs-toggle .icon-bar + .icon-bar {
  margin-top: 4px;
}

.btn-default.xs-toggle .icon-bar {
  background-color: #888;
}
@media (min-width: 990px) {
  .xs-toggle {
    display: none;
    visibility: hidden;
  }
  .xs-collapse {
    display: block;
    visibility: visible;
  }
}

.nav-pills > li > a {
    font-size: 1.2em;
    color: #d22814;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    color: #ffffff;
    background-color: #d22814;
}

.nav-pills > li > a:hover,
.nav-pills > li > a:focus {
    background-color: #fae5e2;
}

.flyer {
    /*color: #605f5f;*/
    color: #58595b;
    font-weight: bold;
    font-size: 1.8em;
}

Answer 1

After many tries and a lot of research I found not really the reason but a working solution. I added after the JQuery script the following code:

$(function () {
    $('.dropdown-menu a').click(function (e) {
        $('.active').removeClass('active');
    });
});

With this function it is fine enough for me. Best Regards, Ralf

Answer 2

For me, adding attribute data-target="#navItemGame" to the <a> and to the #id of my dropdown-menu class solves my problem. Simple adding of data-target and id="myID" is awesome.

<li class="dropdown">
   <a class="dropdown-toggle" data-toggle="dropdown" href="#" data- 
   target="#navItemGame">GAME</
        <ul class="dropdown-menu" id="navItemGame">
             <li><a href="#">MODE 1</a></li>
             <li><a href="#">MODE 2</a></li>
             <li><a href="#">MODE 3</a></li>
        </ul>
</li>