javascript - 是否可以使 Accordion 标题导航到新页面？

Question

我想知道我是否可以让 Accordion 的标题也成为一个按钮而没有按钮的感觉？这是 Accordion 标题的图片和里面的一些数据？我想单击标题中的文本以导航到页面...使用 phonegap/cordova v1.9。用于 windows phone/html、CSS、javascript (c#) 的 Visual Studio 2010 Express 任何帮助将不胜感激 :) 我无论如何都愿意接受解决方案，包括 jquery 的

标题是inboxentry1 POS556445
我在一堆 div 中制作了 Accordion ，这些 div 彼此堆叠在一起......告诉我是否必须添加任何其他内容来帮助解决问题!
这是 Accordion 的一些 html!

 <div id="AccordionContainer" class="AccordionContainer"></div>
    <div onclick="runAccordion(1)">
      <div class="Accordiontitle" onselectstart="return false;">
        <input type="button" href="ItemPages.html">inbox entry1</input>
        <br/>
        <a>POS556446x</a>      
      </div>
    </div>
    <div id="Accordion1Content" class="AccordionContent" style="background-color:white; color:grey;">
      <form>
        <p>
          <label for="create" >Created by :</label>
          <input type="text" style="margin-left:60px;" size="22" id="create"/>
        </p>
        <p>
          <label for="createdate" >Created Date :</label>
          <input type="text" style="margin-left:43px;" size="22" id="createdate"/>
        </p>
        <p>
          <label for="process" >Process name :</label>
          <input type="text" style="margin-left:36px;" size="22" id="process"/>
        </p>
        <p>
          <label for="transtype">Transaction type :</label>
          <input type="text" style="margin-left:20px;" size="22" id="transtype"/>
        </p>
        <p>
          <label for="lastact">Last action :</label>
          <input type="text" style="margin-left:61px;" size="22" id="lastact"/>
        </p>
        <p>
          <label for="lastuser">Last user :</label>
          <input type="text" style="margin-left:73px;" size="22" id="lastuser"/> 
        </p>
        <p>
          <label for="lastupd">Last update :</label>
          <input type="text" style="margin-left:55px;" size="22" id="lastupd"/> 
        </p>
        <p>
          <label for="duration">Duration :</label>
          <input type="text" style="margin-left:78px;" size="22" id="duration"/> 
        </p>
        <p>
          <label for="saved">Saved :</label>
          <input type="text" style="margin-left:93px;" size="22" id="saved"/>
        </p>
        <p>
          <label for="adhoc">Ad hoc user :</label>
          <input type="text" style="margin-left:53px;" size="22" id="adhoc"/> 
        </p>
      </form>
    </div>

这是我的 .js 文件

    var ContentHeight = 200;
  var TimeToSlide = 250.0;

  var openAccordion = '';

  function runAccordion(index) {
  var nID = "Accordion" + index + "Content";
  if (openAccordion == nID)
  nID = '';

  setTimeout("animate(" + new Date().getTime() + "," + TimeToSlide + ",'" + openAccordion + "','" + nID + "')", 33);

  openAccordion = nID;
  }

  function animate(lastTick, timeLeft, closingId, openingId) {
  var curTick = new Date().getTime();
  var elapsedTicks = curTick - lastTick;

  var opening = (openingId == '') ? null : document.getElementById(openingId);
  var closing = (closingId == '') ? null : document.getElementById(closingId);

  if (timeLeft <= elapsedTicks) {
  if (opening != null)
  opening.style.height = ContentHeight + 'px';

  if (closing != null) {
  closing.style.display = 'none';
  closing.style.height = '0px';
  }
  return;
  }

  timeLeft -= elapsedTicks;
  var newClosedHeight = Math.round((timeLeft / TimeToSlide) * ContentHeight);

  if (opening != null) {
  if (opening.style.display != 'block')
  opening.style.display = 'block';
  opening.style.height = (ContentHeight - newClosedHeight) + 'px';
  }

  if (closing != null)
  closing.style.height = newClosedHeight + 'px';

  setTimeout("animate(" + curTick + "," + timeLeft + ",'" + closingId + "','" + openingId + "')", 33);
  }

Answer 1

您可能想在此处进行一些更改。添加了一些类，并且更改了按钮标签，因为它不正确。您想要删除 Accordion 的内联事件并将其粘贴在下面的评论位置。

<div class="AccordionRun">
  <div class="Accordiontitle" onselectstart="return false;">
    <input class="AccordionLink" type="button" href="ItemPages.html" value="inbox entry1">
    <br/>
    <a>POS556446x</a>      
  </div>
</div>

然后就可以拿到了，给它加上点击事件...

var goToPage = function(elem) {
    elem.onclick = function() {
        alert('Go to page...');
        window.location = elem.href;
    };
};

var runAccordion = function(elem) {
    elem.onclick = function() {
        alert('Run Accordion...');
        // Your accordion code goes here...
    }; 
};

var buttons = document.getElementsByTagName('input');
for(var i=0; i < buttons.length; i++) {
    if (buttons[i].className == 'AccordionLink') {
       goToPage(buttons[i]);             
    }
}

var divs = document.getElementsByTagName('div');
for(var i=0; i < divs.length; i++) {
    if (divs[i].className == 'AccordionRun') {
       runAccordion(divs[i]);             
    }
}

jsfiddle.net/FKt4K/2