Javascript 如何通过向函数传递元素类来隐藏/显示像JQuery这样的AngularJS中的元素？

我搜索了我的问题，但找不到答案，我只是在寻找性能最好、代码更少的解决方案

我有一些下拉菜单，我只想有一个函数，通过JavaScript或JQuery在单击按钮时显示和隐藏菜单。这很简单，不会向HTML元素添加更多代码（atributes），这意味着更轻的DOM

假设这些是我的按钮，实际上是我的链接（HTML）：

简单的

在本例中，通过一个简单的JavaScript（JQuery）代码，我们可以隐藏所有菜单，并根据单击链接的类别显示所需的菜单。我们并不是仅仅为了通过单击某个链接来显示或隐藏菜单而添加属性，我们可以通过添加菜单或链接甚至更改功能来扩展程序

现在我想知道，我们如何在Angular和Angular的标准下，得到这样的函数。例如，我可以通过以下代码执行此操作：

<a ng-click="showHideMenu('menu1')">Show menu 1 </a>
<a ng-click="showHideMenu('menu2')">Show menu 2 </a>

有没有办法像JQuery那样通过Angular来做到这一点，摆脱

ng show

和

ng hide

并使用函数式编程，而不是向控制器添加属性和大量

if | else

来隐藏或显示简单菜单

我希望在我的页面中有很多时间使用这些菜单，我更喜欢调用一个简单的函数，代码更少，性能更好

---

我希望我的问题是清楚的

您的逻辑是错误的，您不能从控制器修改dom对象，无论如何，您可以使用ng show、ng hide和$scope的组合来更新视图

你应该这样做

$scope.click= function(showitem){
    $scope.showItem = showItem;
};

在你看来：

<a ng-click="click(true)">Show menu 1 </a>

<div ng-show="showItem">
some item
</div>

与您想做的事情类似

希望有帮助

编辑：
您只需要通过表达式将变量传递给ng show，以显示具有指定条件的元素

$scope.click = function(item){
    $scope.cClass = item
}

<a class="first-menu" ng-click="click(1)" href="#">First link</a>
<a class="second-menu" ng-click="click(2)" href="#">Second link</a>
<a class="third-menu" ng-click="click(3)" href="#">Third link</a>

<div class="first-menu-div" ng-show="cClass == 1">
    This is first MENU
</div>
<div class="second-menu-div" ng-show="cClass == 2">
    This is Second MENU
</div>
<div class="third-menu-div" ng-show="cClass == 3">
    This is Third MENU
</div>

$scope.click=函数（项）{
$scope.cClass=项目
}
这是第一份菜单
这是第二份菜单
这是第三份菜单

检查
我不确定这是否解决了您的问题，但您可以在需要时使用ng开关和ng开关

$scope.click = function(itemNum){
  $scope.displayTab = itemNum;
}

在您看来，您可以：

<a ng-click="click(1)">Show menu 1 </a>
<a ng-click="click(2)">Show menu 2 </a>

<ANY ng-switch="displayTab">
  <ANY ng-switch-when="1">...</ANY>
  <ANY ng-switch-when="2">...</ANY>
  <ANY ng-switch-default>...</ANY>
</ANY>

显示菜单1
显示菜单2
...
...
...

使用视图的顶部可以更具创造性，但这只是一个硬编码示例
您可以使用ngshow作为下面的代码示例，而无需任何类或选择器
（函数（）{
"严格使用",；
有棱角的
.module（'testApp'，[]）
.controller（'HeaderCtrl'，函数（）{
this.target=false；
});
}());

这是第一份菜单
这是第二份菜单
这是第三份菜单
如果你想这样做，为什么还要使用angular？为了便于移植，只需创建一个指令并将其封装在自己的指令中module@charlietfl我是Angular方面的新手，我只是要求了解更多关于Angular的知识，并改变我对Angular的错误认识。首先要做的是将jQuery.js从页面中删除。强烈建议阅读@charlietfl我感谢你的好建议。你能花点时间回答我的问题并纠正我在使用Angular！编程时的错误逻辑吗！？感谢you@charlietfl我正在读你发给我的链接，这真的很好，我错了。感谢您的代码，这只适用于显示一个菜单，我如何使用它显示多个菜单，我的意思是代码中的showItem是一个变量，我只需要与我的一个div一起使用，我还需要在显示特定菜单之前隐藏所有其他菜单。谢谢我的更新我得到了一个工作小提琴手作为一个例子谢谢杰克，这对我很有用。我有一个来自Angular logic的问题，正如你在开始回答时提到的，你编写代码的方式，Angular是正确的和标准的方式吗？这取决于你需要什么，当我修改DOM时，我肯定只想使用一个指令，但这同样取决于你的情况，查看这篇文章可能有助于将您的逻辑包装在JSIDLE中，那么您在JSIDLE中编写的确切代码呢？一个角度程序应该是正确的和标准的吗？或者你只是为我做了一个例子，你能提供一个演示吗？我试过了，但没有成功。谢谢哈默德，谢谢你。这种方式真的很有创意，也很棘手；）这帮助我学到了一些新东西
$scope.click = function(item){
    $scope.cClass = item
}

<a class="first-menu" ng-click="click(1)" href="#">First link</a>
<a class="second-menu" ng-click="click(2)" href="#">Second link</a>
<a class="third-menu" ng-click="click(3)" href="#">Third link</a>

<div class="first-menu-div" ng-show="cClass == 1">
    This is first MENU
</div>
<div class="second-menu-div" ng-show="cClass == 2">
    This is Second MENU
</div>
<div class="third-menu-div" ng-show="cClass == 3">
    This is Third MENU
</div>

$scope.click = function(itemNum){
  $scope.displayTab = itemNum;
}

<a ng-click="click(1)">Show menu 1 </a>
<a ng-click="click(2)">Show menu 2 </a>

<ANY ng-switch="displayTab">
  <ANY ng-switch-when="1">...</ANY>
  <ANY ng-switch-when="2">...</ANY>
  <ANY ng-switch-default>...</ANY>
</ANY>