0

我有一个 html 手风琴，它本质上是一堆带有一些 css A 部分的标签，然后通过 :target 伪类将样式设置为处于活动状态。问题是，任何导致回发的服务器控件，然后我们松开选定的部分。

我正在考虑尝试添加一些东西，以便在服务器上运行，并注入一个类名，但我不知道如何让它处于活动状态。我也尝试过设置焦点

例子：

        <div class="accordion vertical">  
          <section id="Section1">  
              <h2><a href="#Section1">LALALA LALa</a></h2>  
               <asp:Button ID="Button1" runat="server" Text="Button"  />

          </section>  

          <section id="Section2">  
              <h2><a href="#Section2">ZZZZZZZZZZZZZZZz</a></h2>  
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>  
          </section>
</div>

CSS：

.accordion {   
    width:300px;
    height:650px;   
    overflow:hidden;   
    color:#474747;   
    background:#fff;
    padding:10px; 
    text-align: center;
}  

.accordion section{
    float:left;  
    overflow:hidden; 
    color:#333;   
    cursor:pointer;   
    margin:3px;   
}

.accordion section:hover {  
    background:#ececec;  
}

.accordion section p { 
    width: 92%;   
    display:none;
    text-align: left;
}  

.accordion section:after{  
    position:relative;  
    font-size:24px;  
    color:#000;  
    font-weight:bold;  
 }  

.accordion section:nth-child(1):after{ content:'1'; }  
.accordion section:nth-child(2):after{ content:'2'; }  
.accordion section:nth-child(3):after{ content:'3'; }  
.accordion section:nth-child(4):after{ content:'4'; }  
.accordion section:nth-child(5):after{ content:'5'; }  

.accordion section:target {
    width: 92%;
    background: #f3fbe5;    
    padding:10px;  
}  

.accordion section:target:hover {   
    background: #f3fbe5; 
}  

.accordion section:target h2 {  
    width:100%;
    color:#fff;
}  

.accordion section:target h2 a{  
    color:#333;   
    padding:0;
    font-weight: 700;  
}  

.accordion section:target p { 
    width: 90%; 
    display:block; 
}  

.accordion section h2 a{ 
    padding:15px 10px;  
    display:block;   
    font-size:16px;   
    font-weight:normal;  
    color:#000;   
    text-decoration:none;
    font-family: MyraidProReg;
}  

.vertical section{   
    width:100%;
    height:40px;  
    -webkit-transition:height 0.2s ease-out;  
    -moz-transition:height 0.2s ease-out;  
    -o-transition:height 0.2s ease-out;  
    transition:height 0.2s ease-out;  
}  

/*Set height of the slide*/  
.vertical :target{   
    height:250px;   
    width:97%;  
}

.vertical section h2 {   
    position:relative;
}  
/*Set position of the number on the slide*/  
.vertical section:after{   
    top:-60px;  
    left:250px;  
}  
.vertical section:target:after{   
    left:-9999px;  
}
4

1 回答 1

0

我设法解决了这个问题。只是把我的解决方案放在这里，以防有人需要它（或者我被车撞了，患上了健忘症，需要在未来解决这个问题——你好，未来的克鲁德）。

好的，问题与手风琴或下面的控件无关。根本原因是回发不保留主题标签位置。

因此，您可以使用表单的操作做一些有趣的事情，或者将帖子返回（在每个控件上），然后设置一个启动脚本

Page.ClientScript.RegisterStartupScript(this.GetType(), "anchor", "#Section2", true);

或者，如果您使用更新面板来变得漂亮和 ajaxy（在我的情况下命名为 pnl）

ScriptManager.RegisterStartupScript(pnl, pnl.GetType(), "anchor", "#Section2", true);

然后你可以做一些鬼鬼祟祟的事情，比如把 # 名字作为你的 html 标记之一，在回帖中去掉它，让你的方法更通用

于 2013-07-24T09:46:36.543 回答