0

我正在构建一个基于从 SharePoint 列表中检索到的值驱动的导航栏。现在，我正在<ul>为我的列标题和<li>我的内容使用一个。我可以让标题正确显示，也可以让该列的内容正确显示。我遇到的麻烦是<li>似乎被附加到了<ul>很棒的东西上，但它也把它放在了里面。我<ul>的周围有一个边框，我希望将内容直接附加在该边框下，但相反，它将所有内容都放在其中。在此处输入图像描述

这是我认为错误的特定代码块：

$('#TableElement').hover(function () {
$('[id^=Header]').hover(function () {


    $("#" + this.id).append("<li>" + this.id + "</li>");
});
});

这是我的所有代码：

    ///////////////////////////////////////////////////////////////////////////////////////////    //////////////////////////////////////////
////////////////////////////////////////EVERYTHING BELOW THIS LINE IS GOOD TO    GO/////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////    //////////////////////////////////////////
//Print Headers to Screen. This will drive the core functionalty of the navpart
var siteUrl = '/sites/dev';
ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");
theCounter = 0;
var Headers = new Array();
var getCurrentElementId = null;
function retrieveListItems() {
var clientContext = new SP.ClientContext(siteUrl);
var oList = clientContext.get_web().get_lists().getByTitle('myList');
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml("<Where><IsNotNull><FieldRef Name='Title' /></IsNotNull></Where>");
this.collListItem = oList.getItems(camlQuery);
clientContext.load(collListItem);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),  Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded(sender, args) {
var listItemInfo = '';
var listItemEnumerator = collListItem.getEnumerator();
while (listItemEnumerator.moveNext()) {
    var oListItem = listItemEnumerator.get_current();
    theCounter += 1;
    Headers[theCounter - 1] = oListItem.get_item('Title');
}
var HeaderDisplay = _.uniq(Headers);
for (var i = 0; i <= HeaderDisplay.length - 1; i++) {
    $('#TableElement').append("<th id=Header" + i + ">" + HeaderDisplay[i] + "::::::" +   "</th>");
}
}
function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

///////////////////////////////////////////////////////////////////////////////////////////    //////////////////////////////////////////
////////////////////////////////////////EVERYTHING ABOVE THIS LINE IS GOOD TO    GO/////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////    //////////////////////////////////////////


// You got the headers to print as expected. Right now you need to figure out how to get the current ID
// that the mouse is over. Try looking at another project you did where the mouse goes into the table header
// and the outline expands.


$('#TableElement').hover(function () {
$('[id^=Header]').hover(function () {
  // Come back to this:::::::  var content = $(this).html();


    $("#" + this.id).append("<li>" + this.id + "</li>");
});
});


//This should be the universal onmouseover event that will expose only links
//and values relavent to the selected header.

//$(document).ready(function onPageLoad() {
//    $().SPServices({
//        operation: "GetListItems",
//        async: false,
//        listName: "myList",
//        CAMLQuery: "<Query><Where><IsNotNull><FieldRef Name='Title' /></IsNotNull></Where></Query>",
//        completefunc: function completeFunction(xData, Status) {
//            $(xData.responseXML).SPFilterNode("z:row").each(function () {
//                var Headers = "<th>" + $(this).attr("ows_Title") + "</th>";
//                $("#TableElement").append(Headers);
//            });
//        }
//    });
//});

HTML 代码：

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %> 
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="VisualWebPart1UserControl.ascx.cs" Inherits="AnotherMarcPart.VisualWebPart1.VisualWebPart1UserControl" %>
<!DOCTYPE Html />
<html>
<head>
    <link rel="Stylesheet" type="text/css"  href="c:\users\administrator\documents\visual studio 2010\Projects\AnotherMarcPart\AnotherMarcPart\VisualWebPart1\Stylesheet1.css" />
    <title></title>
</head>
<body>
<ul id="TableElement"></ul>
<script type="text/javascript" src="c:\users\administrator\documents\visual studio 2010\Projects\AnotherMarcPart\AnotherMarcPart\VisualWebPart1\jQuery_v1.10.2.js"></script>
<script type="text/javascript" src="c:\users\administrator\documents\visual studio  2010\Projects\AnotherMarcPart\AnotherMarcPart\VisualWebPart1\jquery.SPServices-2013.01.js"></script>
<script type="text/javascript" src="c:\users\administrator\documents\visual studio 2010\Projects\AnotherMarcPart\AnotherMarcPart\VisualWebPart1\Underscore.js 1.5.2.js">    </script>
<script type="text/javascript" src="c:\users\administrator\documents\visual studio 2010\Projects\AnotherMarcPart\AnotherMarcPart\VisualWebPart1\JScript1.js"></script>

</body>
</html>
4

1 回答 1

1

<li>标签必须放在<ul>. 如果您希望您<ul>的内容<li>在.<div>.after().insertAfter()<ul>

此外，此代码可能是错误的：

$('#TableElement').hover(function () {
$('[id^=Header]').hover(function () {


    $("#" + this.id).append("<li>" + this.id + "</li>");
});
});

您不希望两个.hover()处理程序在彼此内部。.hover()每次将鼠标悬停在第一个上时，您都会一遍又一遍地安装第二个。这将为您提供大量重复的事件处理程序，并且内部的函数将被执行多次。

如果.insertAfter()不完全符合您的要求，请向我们展示您的 HTML 并向我们展示您希望插入新内容的确切位置。你说你想要它在<ul>标签的边界之后，所以这就是.insertAfter()要做的。

根据您编辑问题的方式，您将像这样附加到其他 UL：

$("#TableElement").append("<li>" + this.id + "</li>");

这将使它成为TableElement<li>的最后一个内部，它将在它的边界内。没有办法将 a 放在a 内，并将be 放在 周围的边界之外。为此，您必须在之后创建一个容器对象并将内容放入该容器中。<li><ul><li><ul><li><ul><ul>

于 2013-10-10T00:17:51.913 回答