Question

我使用bootstrap创建了一个简单的菜单栏

。现在我希望用户能够编辑列表中的项目，包括菜单上的链接，添加，删除等。我如何使用像javascript等前端代码这样做？

代码：

<div id="sidebar">
   <ul class="sidebar-nav">
    <li class="sidebar-menu">
     <a>MENU</a>
    </li> 

    <li>
     <a href="#" target="myframe">Link #1</a>
    </li> 

    <li>
     <a href="#">Link #2</a>
    </li>

    <li>
     <a href="#">Link #3</a>
    </li> 

    <li>
     <a href="#">Link #4</a>
    </li>
   </ul>
 </div>

Answer 1

您可以使用jquery来实现这一目标，以下功能将对您有所帮助：append，remove，html，text

Answer 2

您可以使用vanilla Javascript，jQuery或许多其他库来查找。 jQuery是我建议你开始的地方。

您可以通过将html元素作为字符串传递给jQuery函数来创建新元素。请参阅＆＃34;创建新元素＆＃34; this page的部分。使用Muzammil提到的append和remove，您可以在DOM中添加和删除元素。

我创建了small jsFiddle，展示了我正在谈论的一些功能以及如何使用它们。这是一个有限的演示，它不包含您想要完整实现的所有功能，但使用了一些相关的jQuery函数。

HTML

<div id="sidebar">
   <ul class="sidebar-nav">
    <li class="sidebar-menu">
     <a>MENU</a>
    </li> 

    <li>
     <a href="#" target="myframe">Link #1</a>
     <button class="delete-link">Delete</button>
    </li> 

    <li>
     <a href="#">Link #2</a>
     <button class="delete-link">Delete</button>
    </li>

    <li>
     <a href="#">Link #3</a>
     <button class="delete-link">Delete</button>
    </li> 

    <li>
     <a href="#">Link #4</a>
     <button class="delete-link">Delete</button>
    </li>
   </ul>

   <div class="input-field">
     <label for="link-title">Enter link title</label>
     <input type="text" class="link-title" name="link-title" placeholder="link Title" />
   </div>

   <div class="input-field">
     <label for="link-title">Enter link URL</label>
     <input type="url" class="link-url" name="link-url" />
   </div>

   <input type="submit" class="add-button" value="Add" />
 </div>

Javascript w / jQuery

var $addButton = $('.add-button');
var $sidebarMenu = $('.sidebar-nav');

// Add the event handlers
$(document).on('click', '.delete-link', removeLink);
$addButton.on('click', addLink);

function removeLink(e) {
    // Remove the parent <li> element of the clicked link
    var $link = $(e.currentTarget).closest('li');
  $link.remove();
}

function addLink(e) {
  e.preventDefault();

  var $linkTitle = $('.link-title');
  var $linkUrl = $('.link-url');
  // Create the new link element using values from text inputs
  var $link = $('<li>').append(
    $('<a>').attr('href', $linkUrl.val()).text($linkTitle.val()));

  // Add a delete button for the link
  $link.append($('<button>').addClass('delete-link').text('Delete'));
  $sidebarMenu.append($link);
  // Reset the text inputs
  $linkTitle.val('');
  $linkUrl.val('');
}

允许用户自定义菜单栏列表中的项目

2 个答案: