mvc2中的Jquery Accordion菜单显示特定新闻

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

首先，当用户从主页导航到 url 中的新闻页面时，您必须在请求中传递一个额外的参数。（一些 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+index 存储在某个隐藏字段中，并通过.. 万事如意