回答編集履歴

1 a

pinpikokun

pinpikokun score 361

2016/11/01 11:38  投稿

以下のような感じでしょうか。
[動作リンク](http://plnkr.co/edit/ZndIy8OU6ZsoOO1wUx2J?p=preview)
```html
<html>
<head>
   <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.0.0-alpha.15/js/onsenui.min.js"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.0.0-alpha.15/css/onsenui.min.css" />  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.0.0-alpha.15/css/onsen-css-components.min.css" />
   <script>
     $(function(){
       $('.pop').on('click',function(e){
       $('.pop ons-list-item').on('click',function(e){
         $("#result").html($(this).attr("name") + "をクリックしました");
         popover.hide();
       });
     });
   
  </script>
</head>
<body>
   <ons-popover direction="down" id="popover">
     <ons-list>
       <ons-list-item class="pop" name="new">新着通知</ons-list-item>
       <ons-list-item class="pop" name="folder">フォルダを作成</ons-list-item>
       <ons-list-item class="pop" name="edit">編集</ons-list-item>
     <ons-list class="pop">
       <ons-list-item name="new">新着通知</ons-list-item>
       <ons-list-item name="folder">フォルダを作成</ons-list-item>
       <ons-list-item name="edit">編集</ons-list-item>
     </ons-list>
   </ons-popover>
   <ons-navigator title="Navigator" var="myNavigator">
     <ons-page>
       <ons-toolbar>
           <div class="left">
             <ons-toolbar-button onclick="popover.show(event)">ポップオーバー</ons-toolbar-button>
         </div>
         <div class="center">Home</div>
       </ons-toolbar>
       <br><br>
       <div style="text-align: center">
         <div style id="result">結果を表示</div>
       </div>
     </ons-page>
   </ons-navigator>
</body>
</html>
```

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る