mvc2 中的 Jquery 手风琴菜单显示特定新闻

Question

我正在使用 jquery 作为手风琴菜单，当用户单击特定的内容时，我的主页上有一个新闻框 新闻标题，它导航到新闻页面，其中所有新闻标题都填充为手风琴菜单的样式，新闻描述被隐藏，当 用户点击新闻标题，新闻描述就会以手风琴风格出现，而所有其他菜单都被隐藏，只有 标题可见。我正在寻找的是，当用户单击主页上的新闻标题时，只有新闻描述应该 显示在新闻页面上，当前显示所有标题，而描述隐藏在手风琴菜单中，我想显示在主页中单击的该新闻的描述可见，而所有其他新闻标题应该不可见描述。 我也在使用MVC2。

我只是不知道如何注入jquery来显示在主页上单击的某些新闻，下面是我正在使用的代码：news.aspx

<div id="accordion">
    <% foreach (var item in Model)
    { %>
        <h3 class="first">
            <span class="left"><a href="#">
            <%: item.Title %></a></span>
            <span class="green2 right">
            <%: String.Format("{0:dd.MM.yy}", item.DateAdded) %></span>
        </h3>
        <div class="accor_cnt">
            <div class="text">
                <p class="green2 title">
                    <%: item.Title %>
                </p>
                <img src="/content/images/structure/newsdivider.gif" alt="" class="newsdivider" />
                <p class="description">
                    <%: item.Article %>
                </p>
            </div>
            <!--END description-->
            <div class="newsMainimage">
                <img src="/content/images/content/<%: item.ImageLarge %>" alt="" />
            </div>
            <!--END newsMainimage-->
            <div style="clear: both;"></div>
        </div>
        <!--END accor_cnt -->
    <% } %>
</div>

母版页上的javascript：

 $(document).ready(function () {

        //When page loads...
        $(".tab_content").hide(); //Hide all content
        $("ul.tabs li:first").addClass("active").show(); //Activate first tab
        $(".tab_content:first").show(); //Show first tab content


        //On Click Event
        $("ul.tabs li").click(function () {

            $("ul.tabs li").removeClass("active"); //Remove any "active" class
            $(this).addClass("active"); //Add "active" class to selected tab
            $(".tab_content").hide(); //Hide all tab content

            var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
            $(activeTab).fadeIn(); //Fade in the active ID content
            return false;
        });



        $("#accordion").accordion({
            active: false,
            collapsible: true,
            autoHeight: false
        });

        //FUNCTION FOR SUB ROLLOVER MENU
        $(".monthlybtn img").hover(function () {
            $(this).attr("src", $(this).attr("src").split(".").join("-hover."));
        }, function () {
            $(this).attr("src", $(this).attr("src").split("-hover.").join("."));
        });

    });

CSS：

ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 20px; /*--Set height of tabs--*/
    width: 357px;
}
ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 20px; /*--Subtract 1px from the height of the unordered list--*/
    line-height: 20px; /*--Vertically aligns the text within the tab--*/
    /*border: 1px solid #999; place divider here*/
    border-left: none;
    margin-bottom: 0px; /*--Pull the list item down 1px--*/
    overflow: hidden;
    position: relative;
}
ul.tabs li a {
    text-decoration: none;
    color: #fff;
    display: block;
    font-size: small;
    padding: 0px 10px;
    /*border: 1px solid #56DB00;  --Gives the bevel look with a 1px white border inside the list item--*/
    outline: none;
}
ul.tabs li a:hover {
    /*background: #ccc;*/
}
html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
    background: #56DB00;
    /*border-bottom: 1px solid #56DB00;*/ /*--Makes the active tab look like it's connected with its content--*/
}


.tab_container {
    border:1px #525453 solid;
    overflow: hidden;
    clear: both;
    float: left; width:357px;
    margin-top:5px;
    background:url(/content/images/structure/upcoming_bg_trans.png) repeat;
}
.tab_content {
    padding: 5px;
    font-size: 11px;
}

Answer 1

首先，当用户从主页导航到网址中的新闻页面时，您必须在请求中传递一个额外的参数。（新闻的一些 id ）并且您必须找出手风琴中该新闻项的索引并将其状态设置为活动状态..

这是一些代码..

$(document).ready(function(){ 
         var newsID = getParameterByName("newsID");
         var newsIndex = getNewsIndesByID(newsID);
         //this you'll have to figure out
         $("#accordion").accordion({
            active: false,
            collapsible: true,
            autoHeight: false,
            active:newsIndex 
        });   
      });

function getParameterByName(name) {      
        name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
        var regexS = "[\\?&]" + name + "=([^&#]*)";
        var regex = new RegExp(regexS);
        var results = regex.exec(window.location.href);
        if (results == null)
         return "";
         else
        return decodeURIComponent(results[1].replace(/\+/g, " "));    
}` 

您可以考虑将新闻的 ID+索引存储在某个隐藏字段中并获取索引在那里..
一切顺利