javascript - 当我们点击附件图标时，会弹出诸如 WhatsApp 之类的选项

Question

我有<div>它应该在单击按钮时打开，并在单击同一按钮时再次关闭。

有人将其标记为重复，我知道主题相同，但解决该问题的方式不同。我需要两种不同的方式。

这是我的 fiddle 链接 https://jsfiddle.net/rojaHema/nhwyowcv/4/

作为一个例子，我需要像whatsApp一样，当点击附件时我们如何获得弹出选项

按钮

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

div

<div class ="bar bar-footer" ng-if="showDetails" >
     <div class = "tabs tabs-icon-bottom tabs-striped tabs-color-gray hide-on-keyboard-open"  style="background-color: white;" >
          <a class = "tab-item" ng-click="myCam()">
          <i class = "icon  ion-camera"></i>camera</a>

          <a class = "tab-item" ng-click="pdfUpload()">
              <i class = "icon ion-upload"></i>
              Pdf
          </a>
     </div>
</div>

Answer 1

更新 fiddle 的链接

Updated Fiddle

Controller 代码

var SampleApp;
(function (SampleApp) {

var app = angular.module('sampleApp', ['ionic']);    
app.controller('MainCtrl', function ($scope) {



    $scope.toggleStretchedMode = function() {

    $scope.showDetails= !$scope.showDetails;



  }

});

})(SampleApp || (SampleApp = {}));

HTML代码

<div>       
    <div ng-app="sampleApp" ng-controller="MainCtrl">
         <ion-content style="display:block">
         <div class="row" ng-if="showDetails"  style="padding-left: 205px;padding-top: 128px;">
        <div class="col col-33" style="text-align:center;">
          <ul class="row" >
            <li class="col" style=" display:inline;padding: 10px 15px;">
            <a class = "tab-item" ng-click="myCam()">
            <i class = "icon  ion-camera"></i>
             Camera
            </a></li>
             <li class="col" style=" display:inline;padding: 10px 15px;" >
            <a class = "tab-item" ng-click="myCam()">
            <i class = "icon  ion-camera"></i>
             Gallery
            </a></li>
            <li class="col" style=" display:inline;padding: 10px 15px;">
            <a class = "tab-item" ng-click="pdfUpload()">
            <i class = "icon ion-upload"></i>
              Pdf
    </a></li>


          </ul>
        </div>
      </div>

        </ion-content>

        <div class ="bar bar-footer">
  <div class = "tabs tabs-icon-bottom tabs-striped tabs-color-gray hide-on-keyboard-open" style="background-color: #11c1f3;">
    <a class = "tab-item" ui-sref="app.homeApp">
       <i class = "icon ion-home"></i>
     Home
    </a>

    <a class = "tab-item" ng-click="myCam()">
       <i class = "icon  ion-camera"></i>
         Camera
    </a>

    <a class = "tab-item" ng-click="toggleStretchedMode()">
       <i class = "icon  ion-paperclip"></i>
         Attach
    </a>

   </div>
</div>

    </div>     
</div>

希望有帮助