Question

每次在弹出框中点击Add Card链接时，我想添加一个带按钮的文本区域。

我是Java Script的新手。每次点击Add card时，我都不知道如何添加文本区域。 [Here is how my page looks like]

以下是代码：

JavaScript的：

<script type="text/javascript">

    $(document).ready(function(){
    $('[data-toggle="popover"]').popover({
        placement : 'right',
        html: true, 
     content: function() 
    {
        return $('#popover-content').html();
    }
    });
  });
    $('.popover-dismiss').popover({
        trigger: 'focus'
    })

</script>

CSS：

  .pop-over-list li>a {
      display: block;
      font-weight: 700;
      padding-top:6px;
      position: relative;
      margin: 0 -10px;
      text-decoration: none;
        }

   .popover-content li>a:hover{

     background-color: #298fca;
    }
  .parent2
    {
    display: flex;
    justify-content: space-between;
    }

Html代码：

 <div class= "flex-container">    
        <div class ="parent2">
            <span><b >Stuff To Try (this is a list)</b></span>
            <span>
 <i class ="fa fa-ellipsis-h" title ="List Actions" tabindex="0" data-
 trigger ="focus" data-toggle="popover" ></i>
        </span>
         <div id="popover-content" style="display:none;">
<ul style ="margin:0; padding:0; list-style: none;" class ="pop-over-list" >
           <li >
                            <a href="#">
                            <b style ="color: #444444">Add Card...</b>
                            </a>
          </li>
          <li>
                           <a href="#"> 
                            <b style ="color: #444444">Copy List...</b>
                           </a>
         </li>
         <li>
                           <a href="#"><b style ="color: #444444">
                               Move List...</b></a>
        </li>
        <li>
              <a href="#"><b style ="color: #444444">Suscribe...</b></a>
        </li>
      <ul>
        <hr>
      <ul style ="margin:0; padding:0; list-style: none;" class ="pop-over-
       list">
       <li> 
          <a href="#"> 
             <b style ="color: #444444">Move All Cards In This List...</b>
          </a>
       </li>
       <li>
            <a href="#"><b style ="color: #444444">
                    Archive All Cards in this List...</b></a>
       </li>
   </ul>
                       <hr>
   <ul style ="margin-top:0px; padding:0; list-style: none;" class ="pop-
   over-list">
       <li><a href="#"> 
       <b style ="color: #444444">Sort By Date Created (Newest First)...</b>
       </a>
       </li>
       <li><a href="#"><b style ="color: #444444">
                  Sort By Date Created (Oldest First)...</b>
           </a>
       </li>
   </ul>
                        <hr>
   <ul style ="margin-top:2px; padding:0; list-style: none;" class ="pop-
    over-list">
      <li><a href="#" >  <b style ="color: #444444">Archive This List...</b>
          </a>
      </li>
   </ul>

    </div>    
   </div>

如何在单击链接时在div中打开新文本区域

0 个答案: