Ionic1中同一按钮点击切换div显示隐藏问题求助

Hey there, let's get that footer bar showing up when you toggle showDetails! I see you've got the click handler working (since {{showDetails}} is switching between true/false), so here are the most likely fixes to try:

1. Initialize showDetails in Your Controller #

AngularJS (which Ionic 1 is built on) relies on variables being present in the controller's $scope for proper two-way binding. If you don't initialize it, clicking the tab might create a local scope variable instead of updating the one your footer is watching.

Add this line to your page's controller:

$scope.showDetails = false;

2. Check for CSS Class Conflicts #

Your footer has several Ionic classes that might be hiding it unintentionally:

• hide-on-keyboard-open: Even if the keyboard isn't open, double-check if this class has any default styles that force hiding. Try removing it temporarily to test.
• bar-footer + tabs: Ionic's bar-footer and tabs classes might have conflicting positioning or display rules. Try simplifying the footer markup first to isolate the issue:

  <div class="bar bar-footer" ng-show="showDetails">
    <p>Test Footer Content</p>
  </div>
  

If this simplified version shows up, add back the tabs markup piece by piece to find which class is causing the problem.

3. Try ng-if Instead of ng-show #

Sometimes CSS inheritance or existing display styles can override ng-show's toggle. ng-if adds/removes the element from the DOM entirely, which can bypass these conflicts:

<div class="bar bar-footer" ng-if="showDetails">
  <!-- Your tabs content here -->
</div>

4. Verify Scope Inheritance #

Ionic's tab-item components can sometimes create child scopes. To make sure your click is updating the correct scope variable, you can bind to an object property instead of a primitive (this avoids scope inheritance issues):

Controller: #

$scope.uiState = {
  showDetails: false
};

HTML: #

<a class="tab-item" ng-click="uiState.showDetails = !uiState.showDetails">
  <i class="icon ion-paperclip"></i> Attach
</a>

<div class="bar bar-footer" ng-show="uiState.showDetails">
  <!-- Your tabs content here -->
</div>

Start with the first fix (initializing the variable) since that's the most common culprit for this exact issue. Let me know if any of these work for you!

内容的提问来源于stack exchange，提问作者Hema