如何从单独的元素中打开菜单项

时间：2016-02-04 19:13:31

标签： javascript jquery html angularjs html5

我正在尝试让我的滑块控制我的菜单，以便在移动滑块时打开匹配的菜单项。因此，当滑块和屏幕上显示ATA 21时，您还应该看到菜单中的ATA打开，依此类推。我打开了菜单，但没有单独的菜单项。我试过简单地使用$（＆＃34; #target＆＃34;）。click（）;打开菜单但失败后，我尝试使用$（＆＃34; #target＆＃34;）。addClass（＆＃34; mm-opened＆＃34;），但也失败了。但是，这两种方法都没有给出任何错误。

＆＃13;
＆＃13; 
var app = angular.module('myApp', ['rzModule'])

app.controller('projectController', function projectController($scope, $http, $rootScope, $timeout) {
  $scope.slider = {
    value: 0,
    options: {
      floor: 0,
      ceil: 15, //defaults to rz-slider-model
      step: 1,
      precision: 0,
      minRange: 0,
      id: null,
      translate: function(value) {
        return 'ATA ' + value;
      },
      stepsArray: ['ATA 6-12', 'ATA 21', 'ATA 22', 'ATA 23', 'ATA 24', 'ATA 26', 'ATA 27', 'ATA 28', 'ATA 29', 'ATA 31', 'ATA 32', 'ATA 33', 'ATA 38', 'ATA 49', 'ATA 71-80', ],
      draggableRange: false,
      draggableRangeOnly: false,
      showSelectionBar: false,
      showSelectionBarEnd: false,
      hideLimitLabels: true,
      readOnly: false,
      disabled: false,
      interval: 350,
      showTicks: true,
      showTicksValues: false,
      ticksTooltip: null,
      ticksValuesTooltip: null,
      vertical: true,
      selectionBarColor: null,
      keyboardSupport: true,
      scale: 1,
      enforceRange: true,
      noSwitching: false,
      onlyBindHandles: false,
      onStart: function(value) {
        $scope.sliderATA = $scope.slider.options.stepsArray[$scope.slider.value];
      },
      onChange: function(value) {
        var api = $("#menu").data("mmenu");
        $scope.sliderATA = $scope.slider.options.stepsArray[$scope.slider.value];
        api.open();
        $("#ATA 21").addClass("mm-opened")

      },
      onEnd: null
    }
  };

  $scope.projectInfo = [];
  $scope.menuInfo = [];
  $http.get('config/Config.json').then(function(response) {
    $scope.projectInfo = response.data[0].config;
    $scope.menuInfo = response.data[1].menu;
  });


  $scope.setImgPath = function(btnPath) {
    console.log(btnPath)
    $scope.activePath = "Assets/images/" + btnPath + "";
    console.log($scope.activePath);
  };
  $scope.contentCtrl = function(id) {
    $scope.active = id;
    console.log($scope.active);

  };

  $scope.closeMenu = function() {
    var API = $("#menu").data("mmenu");
    if ($("html").hasClass('mm-opened')) {
      API.close();
    }

  };
});
＆＃13; 
/* Helvetica Font */

@font-face {
  font-family: HelveticaNeue;
  src: local('0'), url('../fonts/HelveticaNeueLTStd-Lt.woff') format('woff'), url('../fonts/HelveticaNeueLTStd-Lt.otf') format('otf');
}
body,
html {
  font-family: Helvetica, Arial, sans-serif;
  overflow: none;
  color: #FFF;
}
body {
  background: #FFFFFF;
}
#header {
  background: #212121;
  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}
#footer {
  background: #212121;
  box-shadow: 0 -1.5px 4px rgba(0, 0, 0, 0.24), 0 -1.5px 6px rgba(0, 0, 0, 0.12);
}
.fa {
  color: #8ea5d0;
}
.fa:hover {
  color: #627EB0;
}
.fa:active {
  color: #415E95;
}
a:focus {
  outline: 0 none;
  color: #627EB0;
  text-decoration: none;
}
.info_btn {
  color: #FFF !important;
  background-color: #8ea5d0;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);
}
.info_btn:hover {
  background-color: #627EB0;
}
.info_btn:active {
  background-color: #415E95;
  color: #FFF;
  text-decoration: none;
}
.info_btn:hover,
.info_btn:visited,
.info_btn:link,
.info_btn:active {
  text-decoration: none;
  color: #FFF;
}
#menu {
  background: #444444;
  box-shadow: 5px 0px 4px rgba(0, 0, 0, 0.3);
  z-index: 10;
}
#menu .li {
  background: #555555;
}
#menu > ul > li {
  list-style: none;
}
#menu > ul {
  padding: 0px;
}
.menuBtn {
  background-color: transparent;
  display: inline-flex;
  cursor: pointer;
  color: #ffffff;
  border: #212121;
  border-bottom-style: solid;
  border-width: 1px;
  width: 100%;
  font-size: 17px;
  padding: 10px 10px;
  -webkit-transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
  -moz-transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
  -o-transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
  transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
  outline: none;
}
.menuBtn:hover {
  background-color: #333333;
  outline: none;
}
.menuBtn:active {
  position: relative;
  background-color: #222222;
  outline: none;
}
#homeContent {
  color: #000000;
}
.secondary {
  text-indent: 3%;
}
.tertiary {
  text-indent: 6%;
}
.mm-listview .mm-next.mm-fullsubopen+a,
.mm-listview .mm-next.mm-fullsubopen+span {
  padding-right: 65px;
}
/* Global and Overrides */

#header {
  height: 96px;
  border: 0;
  top: 0px;
  width: 100%;
}
#menu {
  top: 96px;
  bottom: 72px;
}
#content {
  width: 100%;
  position: fixed;
  top: 96px;
  bottom: 72px;
}
#footer {
  height: 72px;
  border: 0;
  bottom: 0px;
  position: fixed;
  width: 100%;
}
.fa {
  font-size: 36px;
  cursor: pointer;
  display: inline-block;
  padding-top: 30px;
  padding-left: 30px;
}
.title {
  position: absolute;
  right: 75px;
  top: 20px;
  max-width: 400px;
}
.info_btn {
  position: absolute;
  font-size: 40px;
  font-weight: 400;
  right: 30px;
  top: 48px;
  border-radius: 50px;
  padding: 0 21.8px;
  font-size: 20px;
  line-height: 48px;
  position: absolute;
  top: 72px;
  right: 32px;
  z-index: 100;
}
#sliderContainer {
  position: absolute;
  top: 75px;
  bottom: 75px;
  right: 32px;
}
/*  causes the color to change when you hover over a button of class myButton */

.revNum {
  font-size: 16px;
  position: absolute;
  bottom: 25px;
  left: 12px;
}
.footer_info {
  bottom: 25px;
  position: absolute;
  margin: 0px auto;
  width: 100%;
  font-size: 18px;
  display: block;
  text-align: center;
}
.logo {
  height: 48px;
  position: absolute;
  bottom: 12px;
  right: 75px;
}
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.6.1/css/jquery.mmenu.all.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/angularjs-slider/2.5.0/rzslider.min.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script src="https://code.angularjs.org/1.5.0-rc.2/angular-route.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-slider/2.5.0/rzslider.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.6.1/js/jquery.mmenu.all.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.6.1/wrappers/angular/jquery.mmenu.angular.min.js"></script>
  <script type="text/javascript">
    jQuery(document).ready(function($) {
        $("#menu").mmenu({
            "slidingSubmenus": false,
            "counters": true,
            extensions: ["multiline"],
            offCanvas: {
                position: "left",
                zposition: "front"
            }
        });
    });
  </script>


</head>


<body ng-app="myApp" ng-controller="projectController">
  <title>Schematic Manual</title>
  <div id="wrapper">
    <div id="header">
      
      <a class="fa fa-home" ng-href="#/home"></a>
      <h3 class="title">Schematic Manual</h3>
      <a href class="info_btn"><span>i</span></a>
      <nav id="menu">
        <ul>
          <li><a ng-href="#/home" class="menuBtn">Home</a>
          </li>
          <li><span class="menuBtn">ATA 6-12 - Aircraft General</span>
            <ul>
              <li>
                <a class="menuBtn secondary" ng-href="#/schematicView">G650 Equipment Locator</a>
              </li>
            </ul>
          </li>
          <li id="ATA 21"><span class="menuBtn">ATA 21 - Air Conditioning</span>
            <ul>
              <li>
                <a class="menuBtn secondary" ng-href="#/schematicView">AC Distribution System</a>
              </li>
              <li>
                <a class="menuBtn secondary" ng-href="#/schematicView">Pressurization System Wiring Diagram</a>
              </li>
              <li>
                <a class="menuBtn secondary" ng-href="#/schematicView">Air Conditioning System</a>
              </li>
              <li>
                <a class="menuBtn secondary" ng-href="#/schematicView">Air Conditioning Flow</a>
              </li>
            </ul>
          </li>
          <li><span class="menuBtn">ATA 22 - Auto Flight</span>
          </li>
          <li><span class="menuBtn">ATA 23 - Communications</span>
            <ul>
              <li>
                <a class="menuBtn secondary" ng-href="#/schematicView">Aircraft Antenna Locator</a>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
    <div id="content">
      <a href="#menu" ng-click="closeMenu()" target="_self"><h1>MENU</h1></a>
      <div id="homeContent">
      <center>
        <h1>This is the home page</h1>
        <h2>{{sliderATA}}</h2>
      </center>
        </div>
      <div>
        <div id="sliderContainer">
          <rzslider rz-slider-model="slider.value" rz-slider-options="slider.options"></rzslider>
        </div>
      </div>
    </div>
    <div id="footer">
      <div class="revNum">Revision: 0.0</div>
      <div class="footer_info">Home page</div>
      <img class="logo" ng-src="./assets/images/{{projectInfo.logo}}">
    </div>
    </div>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

0 个答案:

没有答案
相关问题
最新问题