离子导航条中的元素不可点击，无法正常工作-Java 学习之路

我正在创建一个离子 Map 应用程序，并尝试在我的导航栏中添加一个可切换的搜索栏 . 我通过ion-nav-buttons side =“left”（搜索图标，输入栏）添加到导航栏左侧的所有内容都无法点击/聚焦 . 奇怪的是，如果它们从导航栏中溢出，我可以点击这些元素的区域 . 代码和测试图像如下：

<body ng-app="radar">
    <ion-side-menus>
        <ion-side-menu-content>
            <ion-nav-bar class="bar bar-positive" ng-controller="MenuController" delegate-handle="navBar" align-title="center">
                <ion-nav-buttons side="right">
                    <button class="button button-icon button-clear ion-navicon" menu-toggle="right">
                    </button>
                </ion-nav-buttons>
                <ion-nav-buttons side="left">
                    <div class="searchBar">
                        <i class="icon ion-search placeholder-icon searchButton" ng-click="newSearch()"></i>
                        <div class="searchTxt" ng-show="showSearch">
                            <div class="bgdiv"></div>
                            <div class="bgtxt">
                                <input type="text" class="searchInput" placeholder="Search..." ng-model="search">
                            </div>
                        </div>
                    </div>
                </ion-nav-buttons>
            </ion-nav-bar>
            <ion-content ng-controller="MapController" class="mapCanvas has-header">
                <ion-nav-view></ion-nav-view>
                <div id="map" data-tap-disabled="true"></div>
                <button id="GeoButton" ng-click="geoLocate()"><i class="icon ion-android-locate"></i></button>
            </ion-content>
        </ion-side-menu-content>

  <!-- RIGHT SLIDE MENU -->      
        <ion-side-menu class="rightMenu" side="right">
            <header class="bar bar-dark bar-header rightMenuHeader">
                <h1 class="title">Right Menu</h1>
            </header>
          <ion-content class="has-header">
              <ion-nav-view name="RIGHT MENU"></ion-nav-view>
              <div class="button-bar logReg">
                  <a class="button" ng-click="">Login</a>
                  <a class="button" ng-click="">Register</a>
              </div>
          </ion-content>
      </ion-side-menu>
  </ion-side-menus>

和一些CSS：

.searchBar {
  color: white;
  margin: 0 !important;
  padding: 0;
}

.searchBar .icon {
  font-size: 27px;
  line-height: 1.2;
  position: fixed;
  color: white;
  padding-left: 6px;
  padding-right: 6px;
}
.searchBar .searchTxt {
  left: 55px;
  width: 50%;
  position: fixed;
  height: calc(100% - 10px);
  color: white;
}

.searchIcon {
  position: fixed;
  width: 50px;
  height: 50px;
  background-color: black;
}

.searchBar .searchTxt > .bgdiv {
  background-color: darkBlue;
  width: 50%;
  height: 100%;
  position: absolute;
  opacity: 0.3;
}
.searchBar .searchTxt > .bgtxt {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
}
.searchBar .searchTxt input {
  background-color: inherit;
  color: white;
  padding-left: 5px;
  padding-right:5px;
}

.rightMenu {
  background-color: rgb(50,50,50);
}

How it should look

Messy version showing situations in which I can interact with elements

1 回答

1
根据您的代码，您的www / js / controllers.js文件中应该有一个名为“MenuController”的控制器，其函数为newSearch（） .

这是我在我的controllers.js文件中使用控制器'NavCtrl'和函数.getPhoto（）捕获导航栏中的按钮单击
```
.controller('NavCtrl', function($scope, $cordovaCamera) {
$scope.getPhoto = function() {
    //alert("button clicked");
    navigator.camera.getPicture(function(imageURI) {
  }, function(err) {
    console.err(err);
  });
}
```
回复于 2024-05-18T19:45:08+08:00

离子导航条中的元素不可点击，无法正常工作

1 回答

相关问题