Hinzufügen einer Klasse mit display none, um ein element nach jQuery hide / show produziert unerwartete Ergebnisse

Habe ich eingekocht, den code aus einer viel größeren Anwendung, das problem zu replizieren.

Hinzufügen einer Klasse, enthält nur display: none; Liste Elemente nach ausgeblendet wurden (hide()) und dann angezeigt (show()) verlässt das element mit einem style="display: list-element;" und verlässt jene Elemente sichtbar, weil der inline-style überschreibt die Klassen. Als ein Beispiel kann hier gefunden werden - http://jsfiddle.net/jayblanchard/x5bpjogj/2/ werden Sie wollen, um die browser-Konsole zu sehen, die änderungen an der DOM-wie hier gezeigt -

Hier ist die CSS -

.anchor-control-hidden {
    display: none;
}

Hier ist der JavaScript - /jQuery -

var anchor = 'F1';
$('[data-anchor="'+anchor+'"]').find('.anchor-control').hide().show(); //this is done to replicate the problem
setAnchorControlButtons(anchor);

function setAnchorControlButtons(anchor){
  state = $('[data-anchor="'+anchor+'"]').attr('data-status');
  $('[data-anchor="'+anchor+'"]').find('.anchor-control').addClass('anchor-control-hidden');
  if( $('[data-anchor="'+anchor+'"]').attr('data-ahv') == 'null' ) {
      var ahvExists = false;
  } else {
      var ahvExists = true;
  }
    switch(state) {
       case 'laid':
           if( ahvExists ) {
                $('[data-anchor="'+anchor+'"]').find('.anchor-fetch, .anchor-raise').removeClass('anchor-control-hidden');
          } else {
                $('[data-anchor="'+anchor+'"]').find('.anchor-rack, .anchor-fetch').removeClass('anchor-control-hidden');
          }
            break;
    }
}

Und schließlich die markup -

<div data-anchor="F1" data-status="laid" data-ahv="null">
<ul class="anchor-controls">
    <li class="anchor-control anchor-lay" data-action="anchor-lay">
        <div class="anchor-tile"><span class="button-label" style="top: 31%;">Lay</span>
        </div>
    </li>
    <li class="anchor-control anchor-drop" data-action="anchor-drop">
        <div class="anchor-tile"><span class="button-label" style="top: 31%;">Drop</span>
        </div>
    </li>
    <li class="anchor-control anchor-fetch" data-action="anchor-fetch">
        <div class="anchor-tile"><span class="button-label" style="top: 31%;">Fetch</span>
        </div>
    </li>
    <li class="anchor-control anchor-raise" data-action="anchor-raise">
        <div class="anchor-tile"><span class="button-label" style="top: 31%;">Raise</span>
        </div>
    </li>
    <li class="anchor-control anchor-retrieve" data-action="anchor-retrieve">
        <div class="anchor-tile"><span class="button-label" style="top: 31%;">Retrieve</span>
        </div>
    </li>
    <li class="anchor-control anchor-rack" data-action="anchor-rack">
        <div class="anchor-tile"><span class="button-label" style="top: 31%;">Rack</span>
        </div>
    </li>
</ul>
</div>

Habe ich abgestreift alle irrelevant, CSS und markup. Im Beispiel nur zwei der Elemente der Liste (rack-und fetch) sollte sichtbar sein. Ändern der data-ahv - Attribut auf die div führen sollte, dass nur zwei Listenelemente (heben und zu Holen) dargestellt werden.

Ich habe versucht, das entfernen Sie das style-Attribut aus der Liste Element, und das ergibt andere ungewöhnliche Verhalten. Muss ich beenden mit hide() und show() zu Gunsten von expliziten Klassen-oder kann dieses Problem gelöst werden, in irgendeiner anderen Art und Weise?