JS错误,"x没有属性"-手风琴式下拉菜单

  • 时间:
  • 分类: Python

我有一个手风琴样式下拉列表/sublist菜单(类似于"今天的WebMD视频"窗口小部件的功能 http://www.webmd.com/ ) - 它将允许用户单击标题(从主列表)打开该标题下方的完整列表(Sublist). 我的JavaScript几乎是但不完全根据需要工作的. 它也有一个错误,即对象"没有属性". 它的特定错误消息和代码行是指:

选择 | 换行 | 行号
  1. sf has no properties
  2.  var state = sf.style.display;
  3.  

我将进一步解释并提供实际的代码段 - 希望有人可以看到我需要修复的明显内容吗? 基本上,我正在编码一个具有标题列表的工具(在定义列表中编码,DL). 单击标题将在下属列表中显示下面列出的所有项目(编码为无序列表,UL,嵌套在DD标签中). 再次单击同一标题,然后关闭. 或者,单击任何其他标题,然后打开的标题关闭. 还需要JS的另一个动作是在顶级标题上使用的背景图像的位置(在主列表中)需要在扩展其各自的下属UL时需要更改. 下属关闭后,背景图像还需要更改为原始位置. 它实际上与带有滚动的基本下拉列表非常相似,但是由于这需要通过单击事件(而不是鼠标 /悬停事件)进行关闭 /打开 /开放(即" ACCOACEION"),所以它不能是 仅使用CSS完成,需要JavaScript. 好的,希望这清楚地解释了目标. 到目前为止,我得到的是基本的HTML和CSS-下面的截断版本: [html] 标题1 1.1 lorem ipsum 1.2 Dolor Sit Amet 标题2 2.1 lorem ipsum 2.2 Dolor Sit Amet 标题3 3.1 lorem ipsum 3.2 Dolor Sit Amet [/html] 简化的CSS:

选择 | 换行 | 行号
  1. dt {background: url(image.gif) 0 0 no-repeat;}
  2.  

这是一个"像素翻转"样式图像 - 因此,所需的效果是,当单击主列表项目(DT元素)并扩展其下属时,背景位置将更改为" 0 -25px". 所有HTML/CSS都验证. 问题肯定是(最好,我能告诉)JavaScript - 如下:

选择 | 换行 | 行号
  1. /* TOGGLE DISPLAY - show / hide the list */
  2. window.onload=toggleDisplay; // will load if Javascript enabled, otherwise all menus will stay shown / accessible
  3.  
  4. function toggleDisplay(subFeatID) {
  5.     var sf = document.getElementById(subFeatID);
  6.  
  7.     for (var i = 1; i<=10; i++) { // menus are hidden when the document loads up, but only if Javascript is enabled.
  8.         if (document.getElementById('subfeat'+i)) {document.getElementById('subfeat'+i).style.display='none';}
  9.     }
  10.  
  11.     var state = sf.style.display; // toggle display rule
  12.     if (state == 'block')
  13.         sf.style.display = 'none';
  14.     else if (state != 'block')
  15.         sf.style.display = 'block'; 
  16. }
  17.  
  18.  
  19. /* TOGGLE BACKGROUND - change background image position accordingly */
  20. function toggleBgPos(featID) {
  21.     var f = document.getElementById(featID);
  22.  
  23.         for (var i = 1; i<=10; i++) {
  24.         if (document.getElementById('featured'+i)) {document.getElementById('featured'+i).style.backgroundPosition='0px 0px';}
  25.     }
  26.  
  27.     pos = f.style.backgroundPosition;
  28.     if (pos == '0px -25px')
  29.         f.style.backgroundPosition = '0px 0px';
  30.     else if (pos != '0px -25px')
  31.         f.style.backgroundPosition = '0px -25px'; 
  32. }
  33.  
  34.  

作为本身,头条新闻正常和关闭 *,除非 *在您单击"打开标题本身"的情况下. 如果单击任何标题(DT元素),它将扩展以显示子列表. 单击 *任何其他 *标题DT元素,第一个元素关闭,而新的元素刚刚单击扩展. 背景图像位置正确变化. 因此,只有两个问题是: 1.错误消息 2.在单击打开的标题时,无法使头条DT元素关闭. 我非常感谢任何已经阅读所有这些内容并感到足够灵感以提出一些修复的人. 欢迎任何想法! 谢谢!

# 回答1

Heya,Luispunchy. 欢迎来到TSDN! 执行此行时:

选择 | 换行 | 行号
  1. var sf = document.getElementById(subFeatID);
  2.  

SubFeatID的值是什么,该ID当时是否存在元素?

标签: Javascript

添加新评论